Question

我是AngularJS和MVC框架的新手，所以我希望有人可以提供巨大的帮助。我有一个用例，我有一个对象数组，每个对象包含一个子数组。我需要将顶级对象显示为单选按钮，将子项显示为复选框。我有嵌入式ng-repeats的基本视图渲染，但我需要添加一些简单的行为。我们的想法是，如果没有选中父级复选框，则会禁用（灰显）子复选框。因此，一旦选择了不同的单选按钮，除其子项外，其他所有复选框都将被禁用。我可以在这里拍一些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＆amp; A中所述，您需要让您的单选按钮更新共享模型，然后您可以将复选框的禁用状态基于该模型的状态。因此，在您的控制器中，您可以在设置$ 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模型中总是有一个点”规则，如{{3 }}。现在进行了更正，以便选择对象，其中模型值是辅助“id”属性。

AngularJS：嵌套循环，数据绑定和基本行为的正确设计

1 个答案: