2

私はAngularJSとMVCフレームワーク全般に不慣れなので、誰かが大きな助けになることを願っています. オブジェクトの配列があり、それぞれに子の配列が含まれているユースケースがあります。トップレベルのオブジェクトをラジオ ボタンとして表示し、その子をチェックボックスとして表示する必要があります。ng-repeat が埋め込まれた基本的なビュー レンダリングがありますが、簡単な動作を追加する必要があります。アイデアは、親がチェックされていない場合、子のチェックボックスが無効になる (グレー表示される) ということです。したがって、別のラジオ ボタンが選択されると、その子を除く他のすべてのチェックボックスが無効になります。ここで 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