ui-select disable if empty

Question

I'm a beginner to AngularJS. I have an app which makes an API call to get a nested list of car makes, models and years. I've created three ui-select elements to display the results of the call, starting with a list of car makes, then filtering down to models within that make, and finally years for that model. I'd like the second and third selects to be disabled when empty, so that users can't try to start my entering a car model.

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

This is how I'm trying to determine if each select is empty or not, based on Angular ui-select placeholder not working when ng-model is initalized

None of my inputs are being disabled.

Solution 1

I usually use ng-disable on myArray.length to get a 0 or !0 and use it as false and true. Always worked for me.

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

What about in your exemple :

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

In your current code request.make would return [] and not 'false' ... if I understood well.

Solution 2

In case when you use custom filters, better solution will be to operate with ui-select 'items' field.

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

Comments

[Benny Powers]

Thanks! In my case I used ng-disabled="!request.make.models.length" and similar for the other selects.