ng-change事件使用ng-repeat创建时，只会为每个单选按钮触发一次 [英] ng-change event only fires once for each radio button when created with ng-repeat
问题描述
我用单选按钮创建了一个AngularJS指令，以控制我的页面将查询的环境并将其添加到我的页面中.我正在使用双向绑定将名为environment的局部范围变量映射到具有相同名称的应用程序变量.当我在模板中显式创建单选按钮时，它似乎工作得很好(在我的实际代码中，我改用templateUrl，但仍然存在相同的问题).
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.
我想更改单选按钮的创建，以在选择对象数组上使用ng-repeat.它创建选项，并捕获ngChange事件，但每个选项仅捕获一次.
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);
};
}
并且这里是只能使用一次的版本:
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);
};
}
我是AngularJS的新手，所以我很可能犯了一个非常基本的错误.谁能指出我正确的方向?
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?
更新根据callmekatootie的建议，我将相关事件从ng-change更改为ng-click，并且每次都会触发.暂时可以解决此问题，但是我最初使用ng-change，因为我认为ng-click不适用于单击文本标签而不是输入本身而引起的更改，但实际上适用.仍然不明白为什么ng-change只触发一次.
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.
推荐答案
使用对象代替原始值:
app.controller('mainController', ['$scope', function (scope) {
scope.environment = { value: '' };
}]);
删除ng-change和$watch. ng-model就足够了(除非我误解了用例).
Remove ng-change and $watch. ng-model will be enough (unless I'm misunderstanding the use case).
演示: http://jsfiddle.net/GLAQ8/
Very good post on prototypal inheritance can be found here.
这篇关于ng-change事件使用ng-repeat创建时，只会为每个单选按钮触发一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
