2

一般来说，我是 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/

4

1 回答 1

0

正如在此StackOverflow 问答中所观察到的，您需要让单选按钮更新共享模型，然后您可以将复选框的禁用状态基于该模型的状态。因此，在您的控制器中，您可以在设置 $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”属性的对象。

于 2013-03-19T04:30:10.857 回答