javascript - Angular：各ラジオボタンがクリックされた後、ラジオボタンは「ng-change」の起動を停止します

Question

ラジオボタンを動的に作成しています。ng-change='newValue(value)各ラジオボタンを1回押すと、呼び出しが停止します。

これは機能します。ラジオボタンをクリックすると、値がfoo / bar/bazに変更されます。 http://jsfiddle.net/ZPcSe/19/

<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="baz" ng-change='newValue(value)'>    
<hr>
{{value}}
</div>

このコードは次のことを行いません。{{value}}-「ラベル」は、各ラジオボタンが少なくとも1回押されると更新されません。どうやらng-changeはもう発動されていません。

<div ng-controller="MyCtrl">
    <span ng-repeat="i in [0, 1, 2]">
    <input name="asdf" type="radio" ng-model="value" value={{i}} ng-change='newValue(value)'>   
    </span>
    {{value}}
</div>

http://jsfiddle.net/ZPcSe/18/

コントロールは毎回同じです：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.value = '-';
    $scope.newValue = function(value) {
    $scope.value = value;
    }
}

ご協力いただきありがとうございます。

Answer 1

ngRepeat 新しいスコープを作成するため、設定しようとするとvalue、新しいスコープに設定されます。回避策は、親スコープにあるオブジェクトのプロパティを参照することです。オブジェクトのルックアップは親スコープで行われ、プロパティの変更は期待どおりに機能します。

HTML：

<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
  <input name="asdf" ng-model="options.value" value="{{i}}" type="radio">
</span>
{{options.value}}

JS：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.options = {
        value: '-'
    };
    $scope.newValue = function(value) {
        // $scope.options.value = value; // not needed, unless you want to do more work on a change
    }
}​

この回避策の実用的なフィドルを確認できます。詳細については、GitHubのangular / angle.js＃1100を参照してください。

Answer 2

簡単な回避策ですが、スコープの親、つまりスコープng-model="$parent.value"を参照するため、を使用して同じことを実現できます。ng-repeatmyCtrl

変更のみng-model-

<input name="asdf" type="radio" ng-model="$parent.value" value={{i}} ng-change='newValue(value)'>

これがフィドルです

Answer 3

ng-clickの代わりに試してくださいng-change。