Question

我使用angularjs做了一个简单的例子。此示例包含三个无线电输入，每个输入都必须在更改时调用函数（ng-change =＆gt; 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？

编辑： fiddle

Answer 1

一些问题/变化： -

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

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

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

Answer 2

您可以将ng-change更改为ng-click，然后每次实际点击该按钮时都会触发。

这是JSFiddle。

根据您要实现的目标，请考虑$watch或ng-model。

如果将ng-model绑定到＆＃34;值＆＃34;或者其他什么，你可以检查一下它具有的价值并与之合作。 Angulars advantage is exactly this two-way-databinding没有做任何事情。无需拨打电话传递参数的函数。

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

2 个答案: