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]"，您将使用所选值重置ng重复的对象。即，当您选择第一个广播组时，json[0]会从对象更新为值。所以基本上没有什么可重复的，看起来这个组只是从DOM中移除而角度完成了摘要周期。因此，将ng-model设置为不同的对象。

另请注意，虽然使用不提供插值的ng-value注释，而是按原样提供绑定。即将ng-value="{{keyThree}}"更改为ng-value="keyThree"。我只会使用ng-attr-name="{{key}}"代替name="{{key}}"。

这可能是升级角度的时候了，你有一个很老版本的角度

示例实施：

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

$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

点击无线电后，带有ng-repeat的Div消失

1 个答案: