当使用 ng-repeat 创建时，ng-change 事件只为每个单选按钮触发一次 [英] ng-change event only fires once for each radio button when created with ng-repeat

问题描述

我创建了一个带有单选按钮的 AngularJS 指令来控制我的页面将查询的环境并将其添加到我的页面中.我使用双向绑定将名为 environment 的局部范围变量映射到具有相同名称的应用程序变量.当我在模板中显式创建单选按钮时，它似乎工作得很好(在我的实际代码中，我使用 templateUrl 代替，但仍然有同样的问题).

<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1"/>测试</label><label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2"/>Production</label>

我可以根据需要多次选择每个选项，并且值会一直冒泡到应用的范围变量.

我想更改单选按钮的创建以在选择对象数组上使用 ng-repeat.它创建选项，并捕获 ngChange 事件，但每个选项只捕获一次.

<input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(choice)" value="{{choice.id }}"/>{{choice.name }}

这是工作版本小提琴和我的指令代码的相关部分:

模板:'
'+ '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1"/>测试</label>'+ '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2"/>Production</label>'+ '<div>指令环境:{{环境}}</div>'+ '</div>',链接:功能(范围，元素，属性){scope.changeEnvironment = function(choiceID) {console.log('SELECTED environment' + choiceID);范围.环境=选择ID；console.log('指令环境 = ' + scope.environment);};}

还有这里是只运行一次的版本:

template: '
'+ '<input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(choice)" value="{{ choice.id }}"/>{{ choice.姓名 }}'+ '</标签>'+ '<div>指令环境:{{环境}}</div>'+ '</div>',链接:功能(范围，元素，属性){范围.选择 = [{ id: 1, name: "Testing" },{ id: 2, name: "Production" }];scope.changeEnvironment = 函数(选择){console.log('SELECTED environment' + choice.id);范围.环境 = 选择.id;console.log('指令环境 = ' + scope.environment);};}

我是 AngularJS 的新手，所以我完全有可能犯了一个非常基本的错误.有人能指出我正确的方向吗?

UPDATE 根据 callmekatootie 的建议，我将相关事件从 ng-change 更改为 ng-click，并且每次都会触发.这暂时可以作为一种解决方法，但我最初使用 ng-change 是因为我认为 ng-click 不会适用于单击文本标签而不是输入本身，但实际上确实如此.仍然不明白为什么 ng-change 只触发一次.

解决方案

使用对象代替原始值:

app.controller('mainController', ['$scope', function (scope) {scope.environment = { 值:'' };}]);

删除 ng-change 和 $watch.ng-model 就足够了(除非我误解了用例).

演示: http://jsfiddle.net/GLAQ8/

可以找到关于原型继承的非常好的帖子 此处.

I have created an AngularJS directive with radio buttons to control which environment my page will query against and added it to my page. I am using a two-way binding to map a local scope variable called environment to an app variable with the same name. It seems to work well when I create the radio buttons explicitly in the template (in my actual code I'm using templateUrl instead, but still have the same problem).

<div>
    <label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1" />Testing</label>
    <label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2" />Production</label>
</div>

I can select each choice as many times as I want, and the value bubbles all the way up to the app's scope variable.

I wanted to change the creation of the radio buttons to use ng-repeat on an array of choice objects. It creates the options, and it captures the ngChange event, but only once for each choice.

<label ng-repeat="choice in choices">
    <input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(choice)" value="{{ choice.id }}" />{{ choice.name }}
</label>

Here is the working version fiddle and the relevant parts of my directive code:

template: '<div>'
            + '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1" />Testing</label>'
            + '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2" />Production</label>'
            + '<div>Directive environment: {{ environment }}</div>'
            + '</div>',
link: function(scope, element, attributes) {

    scope.changeEnvironment = function(choiceID) {
        console.log('SELECTED environment ' + choiceID);
        scope.environment = choiceID;
        console.log('directive environment = ' + scope.environment);
    };

}

And here is the version that only works once:

template: '<div><label ng-repeat="choice in choices">'
            + '<input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(choice)" value="{{ choice.id }}" />{{ choice.name }}'
            + '</label>'
            + '<div>Directive environment: {{ environment }}</div>'
            + '</div>',
link: function(scope, element, attributes) {
    scope.choices = [
        { id: 1, name: "Testing" },
        { id: 2, name: "Production" }
    ];

    scope.changeEnvironment = function(choice) {
        console.log('SELECTED environment ' + choice.id);
        scope.environment = choice.id;
        console.log('directive environment = ' + scope.environment);
    };

}

I'm brand-new to AngularJS, so it's entirely possible I'm making a very basic mistake. Can anyone point me in the right direction?

UPDATE As per callmekatootie's suggestion, I changed the event in question from ng-change to ng-click, and it fires every time. That will do as a work-around for now, but I originally used ng-change because I didn't think ng-click would apply to changes caused by clicking on the text label rather than the input itself, but in fact it does. Still don't get why ng-change only fires once, though.

解决方案

Use an object instead of a primitive value:

app.controller('mainController', ['$scope', function (scope) {
  scope.environment = { value: '' };
}]);

Remove ng-change and $watch. ng-model will be enough (unless I'm misunderstanding the use case).

Demo: http://jsfiddle.net/GLAQ8/

Very good post on prototypal inheritance can be found here.

这篇关于当使用 ng-repeat 创建时，ng-change 事件只为每个单选按钮触发一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！