javascript - AngularJS:嵌套循环、数据绑定(bind)和基本行为的正确设计

Question

一般来说，我是 AngularJS 和 MVC 框架的新手，所以我希望有人能提供巨大的帮助。我有一个用例，我有一个对象数组，每个对象都包含一个子数组。我需要将顶级对象显示为单选按钮，将它们的子对象显示为复选框。我有嵌入 ng-repeats 的基本 View 渲染，但我需要添加一些简单的行为。这个想法是，如果未选中子复选框，则子复选框将被禁用(变灰)。因此，一旦选择了不同的单选按钮，所有其他复选框都将被禁用，除了它的子项。我可以在这里使用一些 jquery 来完成它，但我相信这对于纯 AngularJS 来说是可能的。

HTML:

<div ng-controller="OrgListCtrl">
    <div ng-repeat="org in orgs">
        <label><input type="radio" name="temp"/> {{org.Name}}</label>
        <section ng-repeat="child in org.children">
            <label><input type="checkbox" class="orgCheckbox"/> {{child.Name}}</label>
        </section>
        <hr/>
    </div>
</div>

Javascript:

function OrgListCtrl($scope) {
    $scope.orgs = [
        {
            "Id" : "ada7a436",
            "Name" : "Organization 1",
            "children" : [{
                    "Id" : "aa556aea",
                    "Name" : "Org 1 Location 1",
                    "children" : []
                }, {
                    "Id" : "0dd8d34a",
                    "Name" : "Org 1 Location 2",
                    "children" : []
                }, {
                    "Id" : "d8315566",
                    "Name" : "Org 1 Location 3",
                    "children" : []
                }
            ]
        }, {
            "Id" : "5ab3e566",
            "Name" : "Organization 2",
            "children" : [{
                    "Id" : "5cae66aa",
                    "Name" : "Org 2 Location 1",
                    "children" : []
                }, {
                    "Id" : "16b8ec35",
                    "Name" : "Org 2 Location 2",
                    "children" : []
                }, {
                    "Id" : "53adb4ba",
                    "Name" : "Org 2 Location 3",
                    "children" : []
                }
            ]
        }
    ];
}

http://jsfiddle.net/CrLRN/

Answer 1

在 this 中观察到StackOverflow Q&A，您需要让单选按钮更新共享模型，然后您可以根据该模型的状态使复选框的禁用状态为基础。因此，在您的 Controller 中，您可以在设置 $scope.orgs 之前添加这一行:

$scope.selected = {id: ''};

接下来，更改您的单选按钮标签，使它们看起来像这样:

<input type="radio" name="temp" ng-model="selected.id" value="{{org.Id}}"/>

最后，将 ng-disabled 指令添加到您的复选框:

<input type="checkbox" class="orgCheckbox" ng-disabled="selected.id != org.Id"/>

那应该就可以了。

编辑:我的原始代码有一个简单的模型值“selectedId”，直接放在 $scope 上，这当然违反了“在你的 ng-models 中总是有一个点”的规则，如 Noob Handbook 中所述.现在已更正，因此选择是一个对象，其中模型值是附属的“id”属性。