Angular: радиокнопки прекращают стрельбу "ng-change" после каждого щелчка

Я создаю переключатели динамически. ng-change='newValue(value) перестает вызываться после того, как один из переключателей был нажат один раз.

Это работает: нажатие на переключатели изменяет значение на 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}} - "label" не обновляется после того, как каждый переключатель был нажат хотя бы один раз. По-видимому, 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/

Каждый раз каждый раз Controlles одинаковы:

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

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

Спасибо за вашу помощь.

Ответы

Ответ 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
    }
}​

Вы можете проверить рабочую скрипту этого обходного пути. Подробнее см. angular/angular.js#1100 на GitHub.

Ответ 2

Просто быстро обходимся, мы можем добиться того же - используя ng-model="$parent.value", потому что он будет ссылаться на родительский элемент области ng-repeat, т.е. в myCtrl области

Изменить только ng-model -

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

Вот скрипка

Ответ 3

Попробуйте ng-click вместо ng-change.