4

親オブジェクトでいっぱいの配列があり、各親オブジェクトにネストされて、子オブジェクトの配列があります。モデルを再構築せずに、angular-ui-select を使用してグループ化を有効にしたドロップダウン選択ボックスを実現する最良の方法を見つけるのに苦労しています。

$scope.allCategories = [
        {
            "code": "AAAA",
            "name": "animals",
            "categories": [
                {
                    "code": "APET",
                    "name": "pets"
                },
                {
                    "code": "ASUP",
                    "name": "supplies"
                },
                {
                    "code": "AOTH",
                    "name": "other"
                }
            ]
        },
        {
            "code": "CCCC",
            "name": "community",
            "categories": [
                {
                    "code": "CCNW",
                    "name": "classes and workshops"
                },
                {
                    "code": "COMM",
                    "name": "events"
                },
                {
                    "code": "CGRP",
                    "name": "groups"
                }
            ]
        }
    ]

これが私がこれまでに構築したものですが、車輪を再発明することなく angular-ui-select が持つ多くの機能が必要です。

<select class="form-control">
    <optgroup ng-repeat="category in allCategories" label="{{category.name}}">
        <option ng-repeat="childCategory in category.categories" value="{{childCategory.code}}">{{childCategory.name}}</option>
    </optgroup>
</select>
4

2 に答える 2

0

それはすべて、何を選択したいかによって異なります。

親を選択したい場合は、選択を1 つだけ使用して、次の 2 番目の例のようにネストされたデータを表示できます: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
  <div ng-bind-html="person.name | highlight: $select.search"></div>
  <small>
    email: {{person.email}}
    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
  </small>
</ui-select-choices>

子を選択する場合は、次の例のように cascadeで2 つの選択を使用できます(通常の選択を使用): http://jsfiddle.net/annavester/Zd6uX/。必要に応じて ui-select 用に推定できます

$scope.countries = ['usa', 'canada', 'mexico', 'france'];
$scope.$watch('country', function(newVal) {
    if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];
});
$scope.$watch('city', function(newVal) {
    if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
});

ちなみに、ui-select でoptgroupが使えるかどうかはわかりません

于 2015-05-21T18:03:01.183 に答える