ui-select 如果为空则禁用答案

【问题标题】：ui-select disable if emptyui-select 如果为空则禁用
【发布时间】：2015-07-01 23:19:16
【问题描述】：

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

<form class="form-horizontal" ng-controller="instant_quote" ng-submit="loadQuote()" name="quoteform">
    <div class="form-group" id="Make">
        <label for="Makes" class="col-md-3 control-label">Make</label>
        <div class="col-md-9">
            <ui-select
                    id="Makes"
                    ng-model="request.make">
                <ui-select-match placeholder="Enter a Make…">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="choice in makes | filter: $select.search">
                    <div ng-bind-html="choice.name | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>

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

这就是我试图根据Angular ui-select placeholder not working when ng-model is initalized确定每个选择是否为空的方式

我的输入都没有被禁用。

【问题讨论】：

标签： angularjs ui-select

【解决方案1】：

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

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

在你的例子中呢：

<ui-select
    id="Models"
    ng-model="request.model"
    ng-disabled="!request.make.length">
<ui-select-match placeholder="Enter a Model…">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="choice in request.make.models | filter: $select.search">
    <div ng-bind-html="choice.name | highlight: $select.search"></div>
</ui-select-choices>

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

【讨论】：

谢谢！在我的情况下，我使用 ng-disabled="!request.make.models.length" 和类似的其他选择。

【解决方案2】：

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

<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>

【讨论】：

【解决方案3】：

据我了解，您想使用以下表达式禁用选择：
ng-disabled="request.make == 'false'"。

尝试这样的操作：
ng-disabled="request.make == undefined"
或
ng-disabled="!('make' in request)"。
这样，您可以检查 make 是否存在，如果不存在则禁用选择。

【讨论】：