ui-select disabilita se vuoto

Question

Sono un principiante di AngularJS. Ho un'app che fa una chiamata API per ottenere un elenco annidato di marche di auto, modelli e anni. Ho creato tre elementi di selezione ui per visualizzare i risultati della chiamata, iniziando da un elenco di marche di auto, quindi filtrando verso i modelli all'interno di quella marca e infine anni per quel modello. Mi piacerebbe che la seconda e la terza selezione venissero disabilitate quando sono vuote, in modo che gli utenti non possano provare a iniziare a inserire un modello di auto.

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

Questo è come io sto cercando di determinare se ogni Select è vuota o non, sulla base di Angular ui-select placeholder not working when ng-model is initalized

Nessuno dei miei ingressi vengono disabilitato.

Answer 1

Io di solito uso ng-disable su myArray.length per ottenere 0 o! 0 e usarlo come falso e vero. Ha sempre funzionato per me.

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

Che dire nel vostro 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> 

Nel request.make codice attuale sarebbero tornati [] e non 'false' ... se ho capito bene.

Answer 2

Da quello che ho capito, si desidera disabilitare i selezioni con questa espressione:
ng-disabled="request.make == 'false'".

Provare qualcosa del tipo:
ng-disabled="request.make == undefined"
o
ng-disabled="!('make' in request)".
In questo modo, è possibile verificare se make esiste e disabilitare i selettori in caso contrario.

Answer 3

Nel caso in cui si utilizzino filtri personalizzati, la soluzione migliore sarà quella di operare con ui-selezionare il campo "articoli".

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