当所选列表为空时禁用 ui-select -angular

Question

如果没有要选择的项目，如何禁用ui-select-multi select的选择框

<ui-select
                                multiple  theme="bootstrap"
                                ng-model="categories.selected"
                                on-select="selectCategory($item,$model)">
                            <ui-select-match placeholder="Select Item...">{{$item.name}}</ui-select-match>
                            <ui-select-choices
                                    repeat="category in categories.categories track by category.id">
                                {{category.name}}
                            </ui-select-choices>
                        </ui-select>

Answer 1

ui-select指令提供了一个ng-disabled属性。

例：

<ui-select
                                multiple  theme="bootstrap"
                                ng-model="categories.selected"
                                on-select="selectCategory($item,$model)"
                                ng-disabled="categories.categories.length === 0">
                            <ui-select-match placeholder="Select Item...">{{$item.name}}</ui-select-match>
                            <ui-select-choices
                                    repeat="category in categories.categories track by category.id">
                                {{category.name}}
                            </ui-select-choices>
                        </ui-select>

Answer 2

您可以随时使用 ng-disabled 来禁用 Angular 提供的任何组件。因此，在这里您也可以将ng-disabled与 ui-select 一起使用。

<ui-select
                                multiple  theme="bootstrap"
                                ng-model="categories.selected"
                                ng-disabled="categories.selected.length === 0"
                                on-select="selectCategory($item,$model)">
                            <ui-select-match placeholder="Select Item...">{{$item.name}}</ui-select-match>
                            <ui-select-choices
                                    repeat="category in categories.categories track by category.id">
                                {{category.name}}
                            </ui-select-choices>
                        </ui-select>