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

2

我认为您需要将层次结构展平为数组。

类似于： http: //plnkr.co/edit/ESHmxOqMuIvAYFdNYcV0

这是我为您的示例编写的展平功能。这些属性可以很容易地适应其他用例：

function flattenCategories(categories, depth, parent){
  if(angular.isUndefined(depth)){ depth = 1; }
  var flat = [];
  angular.forEach(categories, function(category){
    flat.push({
                code: category.code,
                name: category.name,
                depth: depth,
                parent: parent
              });
    if(category.categories){
      var childCategories = flattenCategories(category.categories, depth+1, (angular.isDefined(parent)?parent+'.':'')+category.code);
      if(childCategories.length){
        flat.push.apply(flat, childCategories);
      }
    }
  });
  return flat;
}

$scope.flatCategories = flattenCategories( $scope.allCategories );

使用类中的深度属性（即。class="depth-{{category.depth}}"），您可以创建缩进和组标题样式。无论您需要支持多少深度，您都需要生成 CSS。

于 2015-11-20T18:31:30.047 回答
0

这完全取决于您希望选择什么。

如果你想选择一个父母，你可能只使用一个选择，并显示嵌套数据，如第二个示例所示：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 中使用两个选择，比如这个例子（使用常规选择）：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'];
});

顺便说一句，我不确定您是否可以将optgroup与 ui-select 一起使用

于 2015-05-21T18:03:01.183 回答