当实际选项低于optgroups应使用的选项时,使用ui-select(新版本)的选项组

时间:2014-11-09 20:27:47

标签: javascript angularjs angularjs-directive angularjs-ng-repeat ui-select2

我使用UI-Select(select2主题)和一系列数据,这些数据以下列形式返回:

Array of Objects [
    0: Object {
         category: "Category name, to be used as optgroup label",
         options: [
             0: Object {
                 id: 5,
                 name: "Some name, to be used as an option under the above optgroup",
             }
             1: Object {
                 id: 6,
                 name: "Some name, to be used as an option under the above optgroup",
             }
             2: Object {
                 id: 7,
                 name: "Some name, to be used as an option under the above optgroup",
             }
         ]
    }
    1: Object {
         category: "Another category name, to be used as second optgroup label",
         options: [
             0: Object {
                 id: 44,
                 name: "Some name, to be used as an option under the above optgroup",
             }
             1: Object {
                 id: 45,
                 name: "Some name, to be used as an option under the above optgroup",
             }
             2: Object {
                 id: 47,
                 name: "Some name, to be used as an option under the above optgroup",
             }
         ]
    }
]

我创建optgroups的功能:

$scope.createOptGroups = function(item){
    return item.category;
};

确实可以正确创建我的optgroup。

这里的问题如下。为了能够创建optgroups,我需要达到这个级别:

<ui-select multiple ng-model="diseaseObject.chosenDiseases.states">              
    <ui-select-match placeholder="Start typing disease name or click in the box...">{{$item}}</ui-select-match>
        <ui-select-choices
            group-by="createOptGroups" 
            repeat="state in diseaseObject.allStates | filter: $select.search track by $index">

            {{state}}

        </ui-select-choices>                                
</ui-select>

如果您想知道此代码的结果是什么,请查看此图片:http://screencast.com/t/S2VBuK1jXtA

显然数据存在,但需要缩小到所需的diseaseName属性。 但是......如果我这样做,我将失去选择组!我将不再处于category属性可用的级别。 另一个想法是缩小state,如:state.options。但是,该值仍然是需要迭代自身的对象数组。但是,如果有一个选项可以为实际选项实现另一个转发器(意图实现<span ng-repeat="name in state.options">{{name}}</span>之类的东西 - 那就可以了。我已经尝试了但指令(ui-select)不喜欢它。

他们有这个group-by内容的官方演示,但在这种特殊情况下,该函数只是将optgroups创建为自定义字符串(字母跨度),这与我的问题非常不同。

请参阅最底层的示例:http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview

0 个答案:

没有答案