AngularJs - NG-modello in un SELEZIONA

Question

JSfiddle

Problema:

Ho un SELECT-elemento nella mia pagina, che viene riempito con un ng-repeat. Ha anche un ng-model che ha un valore predefinito.

Quando cambio il valore, lo ng-model si adatta, va bene. Ma l'elenco a discesa mostra uno spazio vuoto al momento del lancio, dove invece dovrebbe essere selezionato l'elemento con il valore predefinito.

Codice

<div ng-app ng-controller="myCtrl"> 
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit"> 
     <option ng-repeat="item in units" ng-value="item.id">{{item.label}}</option> 
    </select> 
</div> 

Con JS:

function myCtrl ($scope) { 
    $scope.units = [ 
     {'id': 10, 'label': 'test1'}, 
     {'id': 27, 'label': 'test2'}, 
     {'id': 39, 'label': 'test3'}, 
    ] 

     $scope.data = { 
     'id': 1, 
     'unit': 27 
     } 

}; 

Answer 1

È possibile utilizzare la direttiva ng-selected sugli elementi opzionali. Prende espressione che se la verità imposterà la proprietà selezionata.

In questo caso:

<option ng-selected="data.unit == item.id" 
     ng-repeat="item in units" 
     ng-value="item.id">{{item.label}}</option> 

Demo

angular.module("app",[]).controller("myCtrl",function($scope) { 
 
    $scope.units = [ 
 
     {'id': 10, 'label': 'test1'}, 
 
     {'id': 27, 'label': 'test2'}, 
 
     {'id': 39, 'label': 'test3'}, 
 
    ] 
 

 
     $scope.data = { 
 
     'id': 1, 
 
     'unit': 27 
 
     } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="myCtrl"> 
 
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit"> 
 
     <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option> 
 
    </select> 
 
</div>

Answer 2

provare il seguente codice:

nel controller:

function myCtrl ($scope) { 
     $scope.units = [ 
     {'id': 10, 'label': 'test1'}, 
     {'id': 27, 'label': 'test2'}, 
     {'id': 39, 'label': 'test3'}, 
     ]; 

    $scope.data= $scope.units[0]; // Set by default the value "test1" 
}; 

Nella pagina:

<select ng-model="data" ng-options="opt as opt.label for opt in units "> 
       </select> 

Working Fiddle

Answer 3

di selezionare il valore di default dovrebbe essere uno del suo valore nella lista. Per caricare la selezione con il valore predefinito è possibile utilizzare ng-options. Una variabile di ambito deve essere impostata nel controller e tale variabile viene assegnata come modello ng nel tag select HTML.

Visualizza questa plunker per tutti i riferimenti:

http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview

Answer 4

Non avete bisogno di definire i tag opzione, è possibile farlo utilizzando i ngOptions direttiva: https://docs.angularjs.org/api/ng/directive/ngOptions

<select class="form-control" ng-change="unitChanged()" ng-model="data.unit" ng-options="unit.id as unit.label for unit in units"></select> 

Answer 5

Tuttavia, ngOptions offre alcuni vantaggi come la riduzione della memoria e l'aumento della velocità non creando un nuovo ambito per ogni istanza ripetuta. angular docs

Soluzione alternativa è la direttiva ng-init. È possibile specificare la funzione che inizializzerà i dati predefiniti.

$scope.init = function(){ 
      angular.forEach($scope.units, function(item){ 
       if(item.id === $scope.data.unit){ 
        $scope.data.unit = item; 
       } 
      }); 
     } 

Vedi jsfiddle

Answer 6

Si può anche mettere la voce con il valore predefinito selezionato dal ng-repeat come segue:

<div ng-app="app" ng-controller="myCtrl"> 
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit"> 
     <option value="yourDefaultValue">Default one</option> 
     <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option> 
    </select> 
</div> 

e non dimenticare il valore se si atribute lascialo vuoto avrai lo stesso problema