Div ng-repeat 在单选按钮点击后消失

Question

我有 2 个 div，每个有 4 个单选按钮。当用户单击其中一个 div 中的单选按钮时，整个 div 将消失。其余 div 也会发生同样的事情。小提琴：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>

控制器：

    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]"，您正在使用 selected 值重置 ng-repeated 对象。即，当您 select 第一个无线电组时， json[0] 从对象更新为值。所以基本上没有什么可重复的，看起来该组刚刚从 DOM 中删除并且 angular 完成了摘要周期。所以将你的 ng-model 设置为不同的对象。

另请注意，在使用 ng-value 时请注意，不要提供内插值，而是按原样提供绑定。即，将 ng-value="{{keyThree}}" 更改为 ng-value="keyThree"。我只会使用 ng-attr-name="{{key}}" 而不是 name="{{key}}".

大概是时候升级了angular,你的版本太老了angular

示例实现：

在您的控制器中，定义一个对象来存储答案：

$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

Div ng-repeat 在单选按钮点击后消失

Div with ng-repeat dissapears after radio click

javascript

html

angularjs

angularjs-scope

angularjs-ng-repeat