Angularjs仅在输入收音机第一次触发ng-change选择

我已经做了一个简单的例子使用angularjs。这个例子包含三个无线电输入，每个输入都必须在变化时调用一个函数（ng-change => console.log）。不幸的是，该功能仅在第一次选择任何无线电输入时触发。Angularjs仅在输入收音机第一次触发ng-change选择

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

来源

2014-10-07 sergioFC

适合我......但是最好使用'ng-value =“value”'而不是'value =“{{value}}”http://plnkr.co/edit/tMW2yT?p =预览 – PSL 2014-10-07 15:25:44

几个问题/变化： -

1-更改value={{value}}到ng-value="value"因为NG-值 - 将指定的表达式输入的值[选择]或输入[无线电]，从而当元素被选中，该元素的ngModel被设置为绑定值。

2-您需要在父范围的属性上设置选定的值，您有ng-repeat，并且您确实在设置子范围的值，因此每个无线电具有其自己的子范围，并且其值永远不会更改ng-change不会被触发。

3-您不需要传递模型值，但logChange范围已经拥有它。

尝试： -

在你的控制器中添加： -

$scope.selected = {};

和视图设置模型作为属性的控制范围，而不是NG-重复子范围的val财产selected属性： -

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

Plnkr

来源

2014-10-07 15:37:00 PSL

很酷，谢谢！ – sergioFC 2014-10-07 15:43:00

@sergioFC不客气.. :) – PSL 2014-10-07 15:43:15

您可以更改ng-change到ng-click，那么它激发你实际点击按钮，每一次。

这是JSFiddle。

根据你想达到的目的，考虑$watch或ng-model为你的目的。

如果你将ng-model绑定到“values”之类的东西，你可以检查它具有哪个值，并使用它。 Angulars advantage is exactly this two-way-databinding没有做任何事情。无需调用函数来传递参数。

来源

2014-10-07 15:33:11

感谢+1，因为ng-click这个例子很好，而$ watch它总是用来监视变量的变化。 – sergioFC 2014-10-07 15:47:29

Angularjs仅在输入收音机第一次触发ng-change选择

回答

相关问题