Angular-ui-选择父分组和子分组

Question

我有一个充满父对象的数组，并且嵌套在每个父对象中，我有一个包含子对象的数组。在不重新构建模型的情况下，我正在努力寻找使用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>

Answer 1

我认为你需要将你的层次结构扁平化成一个数组。

类似于：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 );

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

Answer 2

这完全取决于您希望它被选中的内容。

如果您想选择一个父，您可以只使用one select，并显示嵌套数据，如下面的第二个示例所示：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>

如果您想要选择一个子级联，您可以在中使用two selects ，就像下面这个例子(使用常规选择)：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一起使用