Inizializzazione select con AngularJS e ng-repeat

Sto provando a get la casella di selezione per iniziare con un'opzione pre-riempita utilizzando ng-repeat con AngularJS 1.1.5. Invece, la selezione si avvia sempre con niente selezionato. Ha anche un'opzione vuota, che non voglio. Penso che esiste un effetto collaterale che nulla sia selezionato.

Posso get questo lavoro utilizzando ng-opzioni invece di ng-ripetere, ma voglio utilizzare ng-ripetere per questo caso. Anche se il mio esempio ridotto non lo mostra, voglio anche impostare l'attributo del titolo di each opzione, e non c'è modo di farlo utilizzando le opzioni ng, per quanto ne so.

Non credo che questo sia legato alla comune materia di AngularJs / inheritance; prototipica di ereditarietà. Alless non vedo nulla di evidente quando controllai a Batarang. Inoltre, quando si seleziona un'opzione nel select con l'interface utente, il model viene aggiornato correttamente.

Ecco l'HTML:

<body ng-app ng-controller="AppCtrl"> <div> Operator is: {{filterCondition.operator}} </div> <select ng-model="filterCondition.operator"> <option ng-repeat="operator in operators" value="{{operator.value}}" > {{operator.displayName}} </option> </select> </body> 

E il JavaScript:

 function AppCtrl($scope) { $scope.filterCondition={ operator: 'eq' } $scope.operators = [ {value: 'eq', displayName: 'equals'}, {value: 'neq', displayName: 'not equal'} ] } 

JS Fiddle per questo: http://jsfiddle.net/coverbeck/FxM3B/2/

OK. Se non si desidera utilizzare la modalità corretta ng-options , è ansible aggiungere l'attributo ng-selected con una logica di controllo delle condizioni per la direttiva delle option per eseguire il lavoro di pre-selezione.

 <select ng-model="filterCondition.operator"> <option ng-selected="{{operator.value == filterCondition.operator}}" ng-repeat="operator in operators" value="{{operator.value}}"> {{operator.displayName}} </option> </select> 

Demo di lavoro

Per il tag di selezione, angular fornisce la direttiva di ng-options. Ti dà il framework specifico per impostare le opzioni e impostare un valore predefinito. Ecco il violino aggiornato utilizzando ng-options che funziona come previsto: http://jsfiddle.net/FxM3B/4/

HTML aggiornato (il codice rimane lo stesso)

 <body ng-app ng-controller="AppCtrl"> <div>Operator is: {{filterCondition.operator}}</div> <select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators"> </select> </body> 

Grazie a TheSharpieOne per indicare l'opzione selezionata. Se fosse stata inviata come risposta, piuttosto che come commento, avrei fatto la risposta corretta.

Ecco un JSFiddle funzionante: http://jsfiddle.net/coverbeck/FxM3B/5/ .

Ho anche aggiornato il violino per utilizzare l'attributo del titolo, che avevo lasciato nel mio post originale, poiché non era la causa del problema (ma è la ragione per cui voglio utilizzare la replica-ng invece delle opzioni ng) .

HTML:

 <body ng-app ng-controller="AppCtrl"> <div>Operator is: {{filterCondition.operator}}</div> <select ng-model="filterCondition.operator"> <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option> </select> </body> 

JS:

 function AppCtrl($scope) { $scope.filterCondition={ operator: 'eq' } $scope.operators = [ {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'}, {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'} ] } 

Il fatto che l'angolo inietta un elemento di opzione vuoto al selettore è che l'object model legato a esso per impostazione predefinita viene fornito con un valore vuoto in quando viene inizializzato.

Se si desidera select un'opzione predefinita, probabilmente è ansible impostarla sull'ambito del controller

 $scope.filterCondition.operator = "your value here"; 

Se vuoi un segnaposto di opzione vuoto, questo funziona per me

 <select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators"> <option value="">Choose Operator</option> </select> 

Come suggerito è necessario utilizzare le opzioni ng e, purtroppo, credo che sia necessario fare riferimento all'elemento di matrix per un valore predefinito (a less che l'arrays non sia un arrays di stringhe).

http://jsfiddle.net/FxM3B/3/

Il JavaScript:

 function AppCtrl($scope) { $scope.operators = [ {value: 'eq', displayName: 'equals'}, {value: 'neq', displayName: 'not equal'} ] $scope.filterCondition={ operator: $scope.operators[0] } } 

L'HTML:

 <body ng-app ng-controller="AppCtrl"> <div>Operator is: {{filterCondition.operator.value}}</div> <select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators"> </select> </body> 

Se si utilizza md-select e ng-ripetendo l'opzione md-opzione da materiale angular, è ansible aggiungere ng-model-options="{trackBy: '$value.id'}" alla ng-model-options="{trackBy: '$value.id'}" tag md-select mostrata in questo penna

Codice:

 <md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}"> <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label> <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option> </md-select>