我有 2 个 div,每个 div 有 4 个单选按钮。当用户单击其中一个 div 中的单选按钮时,整个 div 将消失。剩下的 div 也会发生同样的情况。 fiddle :http://jsfiddle.net/350L9upu/2/
以下是我的设置:
HTML:
<div ng-controller="MyCtrl">
<div ng-repeat="(key, value) in questions">
<div ng-repeat="(keyTwo, valueTwo) in value">{{keyTwo}}
<div ng-repeat="(keyThree, valueThree) in valueTwo">
<input type="radio" ng-model="questions[key]" name="{{key}}" ng-value="{{keyThree}}" />{{valueThree}}</div>
</div>
</div>
</div>
Controller :
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
var json = {
"0": {
"question0": {
"1": "1",
"2": "2",
"3": "3",
"4": "4"
}
},
"1": {
"question1": {
"1": "1",
"2": "2",
"3": "3",
"4": "4"
}
}
};
$scope.questions = json;
}
为什么 checked
属性在触发时会这样做?我不明白它是如何连接到任何 JavaScript 的。
最佳答案
这是因为通过执行 ng-model="questions[key]"
您正在使用所选值重置 ng-repeated 对象。即,当您选择第一个单选组时,json[0]
将从对象更新为值。因此基本上没有什么可重复的,看起来该组刚刚从 DOM 中删除,并且 Angular 完成了摘要循环。因此,将您的 ng-model 设置为不同的对象。
另请注意,在使用 ng-value
时请注意,不提供插值,而是按原样提供绑定(bind)。即将 ng-value="{{keyThree}}"
更改为 ng-value="keyThree"
。我只会使用 ng-attr-name="{{key}}"
而不是 name="{{key}}"
。
可能是时候升级 Angular 了,因为你有一个非常旧的 Angular 版本
实现示例:
在 Controller 中,定义一个对象来存储答案:
$scope.answered = {};
在您看来:
<div ng-repeat="(keyThree, valueThree) in valueTwo">
<input type="radio" ng-model="answered[key]"
ng-attr-name="{{key}}" ng-value="keyThree" />{{valueThree}}</div>
</div>
<强> Fiddle
关于javascript - 带有 ng-repeat 的 Div 在单选按钮后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27791623/