关于angularjs:ui-select为空时禁用

ui-select disable if empty

我是AngularJS的初学者。我有一个应用程序可以进行API调用,以获取汽车制造商,型号和年份的嵌套列表。我创建了三个ui-select元素来显示调用结果,从汽车制造商列表开始,然后过滤到该制造商中的模型,最后是该模型的使用年限。我希望在第二个和第三个选择为空时将其禁用,以使用户无法尝试开始输入汽车模型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form class="form-horizontal" ng-controller="instant_quote" ng-submit="loadQuote()" name="quoteform">
   
        <label for="Makes" class="col-md-3 control-label">Make</label>
       
            <ui-select
                    id="Makes"
                    ng-model="request.make">
                <ui-select-match placeholder="Enter a Makea€|">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="choice in makes | filter: $select.search">
                   
                </ui-select-choices>
            </ui-select>
       
   

   
        <label class="col-md-3 control-label">Model</label>
       
            <ui-select
                    id="Models"
                    ng-model="request.model"
                    ng-disabled="request.make == 'false'">
                <ui-select-match placeholder="Enter a Modela€|">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="choice in request.make.models | filter: $select.search">
                   
                </ui-select-choices>
            </ui-select>

这是我基于ng-model初始化时Angular ui-select占位符不起作用而试图确定每个选择是否为空的方法

我的输入均未禁用。


我通常在myArray.length上使用ng-disable来获取0或!0并将其用作false和true。一直为我工作。

1
2
3
4
<select ng-model="model.a"
   ng-options="value for a in array"
   ng-disabled="!array.length">
</select>

在您的示例中如何:

1
2
3
4
5
6
7
8
<ui-select
    id="Models"
    ng-model="request.model"
    ng-disabled="!request.make.length">
<ui-select-match placeholder="Enter a Modela€|">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="choice in request.make.models | filter: $select.search">
   
</ui-select-choices>

在您当前的代码中,如果我理解得很好,make将返回[]而不是'false'...。


如果使用自定义过滤器,则更好的解决方案是使用ui-select'items'字段进行操作。

1
2
3
4
5
6
7
<ui-select ng-model="myCtrl.selectedItem" ng-disabled="!$select.search.length && !$select.items.length"
            theme="selectize">
                <ui-select-match placeholder="{{$select.disabled ? 'No items available' :'Start typing a name'}}"></ui-select-match>
                <ui-select-choices repeat="myitem in myFilteredItems = ( myCtrl.myItems| filter:{ someMyItemField:$select.search} | filter:myCtrl.filterItemsFunc)">
                    {{myItem}}
                </ui-select-choices>
            </ui-select>

据我了解,您想使用以下表达式禁用选择:ng-disabled="request.make == 'false'"
尝试这样的操作:ng-disabled="request.make == undefined"ng-disabled="!('make' in request)"。这样,您可以检查make是否完全存在,如果不存在,则禁用选择。