javascript - 带有 ng-repeat 的 Div 在单选按钮后消失

Question

我有 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 的。

Answer 1

这是因为通过执行 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