Angularjs仅在第一次选择输入无线电时触发ng-change

Question

我用angularjs做了一个简单的例子.此示例包含三个无线电输入,每个输入都必须在更改时调用函数(ng-change => console.log).不幸的是,该功能仅在第一次选择任何无线电输入时触发.

HTML:

<div ng-app="myApp" ng-controller="radioGroupController">
    <div ng-repeat="value in values">{{value}}
        <input type="radio" name="name" ng-model="val" value="{{value}}" ng-change="logChange(val)" />
        <hr/>
    </div>
</div>

JS:

angular.module('myApp', [])
    .controller('radioGroupController', ['$scope', function ($scope) {
    $scope.values = ['Option1', 'Option2', 'Option3'];
    $scope.logChange = function (newValue) {
        console.log('Changed to ' + newValue);
    };
}]);

我做错了什么或这是预期的beheaviour？

编辑: 小提琴

Answer 1

几个问题/变化: -

1-更改value={{value}}为ng-value="value"因为ng-value - 将给定表达式绑定到input [select]或input [radio]的值,以便在选择元素时,将该元素的ngModel设置为绑定值.

2-您需要在父作用域上的属性上设置所选值,您有ng-repeat,并且您确实设置了子作用域的值,因此每个无线电都有自己的子作用域,其值永远不会改变,所以ng-change是没有触发.

3-虽然logChange范围已经拥有,但您不需要传递模型值.

尝试:-

在您的控制器中添加: -

  $scope.selected = {};

和view将模型设置selected为控制器范围属性的属性,而不是ng-repeated子范围的val属性: -

 <input type="radio" name="name" ng-model="selected.val"
                  ng-value="value" ng-change="logChange()" />

Plnkr