AngularJS - ng-Modell in einer SELECT

Question

JSfiddle

Problem:

Ich habe ein SELECT-Element in meiner Seite, die mit einem ng-repeat ausgefüllt wird. Es hat auch eine ng-model, die einen Standardwert hat.

Wenn ich den Wert ändern, ng-model passt, das ist in Ordnung. Die Drop-Down-Liste zeigt jedoch einen leeren Slot beim Start an, in dem das Element mit dem Standardwert ausgewählt werden soll.

-Code

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

Mit 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

können Sie die ng-selected Richtlinie über die Option Elemente verwenden. Es wird angenommen, dass truthy die ausgewählte Eigenschaft setzt.

In diesem Fall:

<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

versuchen, den folgenden Code ein:

In Ihrem 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" 
}; 

In Ihrer Seite:

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

Working Fiddle

Answer 3

Standardwert des Select sollte in der Liste eines ihres Wertes sein. Um die Auswahl mit dem Standardwert zu laden, können Sie ng-options verwenden. Eine Bereichsvariable muss im Controller festgelegt werden, und diese Variable wird als ng-model im HTML-Select-Tag zugewiesen.

ansehen Plunker für alle Verweise:

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

Answer 4

Sie brauchen nicht Option Tags zu definieren, Sie können dies tun, die ngOptions Direktive: 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

jedoch ngOptions bietet einige Vorteile wie die Reduzierung des Arbeitsspeichers und die Erhöhung der Geschwindigkeit, da für jede wiederholte Instanz kein neuer Bereich erstellt wird. angular docs

Alternative Lösung ist Verwendung ng-init Richtlinie. Sie können eine Funktion angeben, die Ihre Standarddaten initialisiert.

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

Siehe jsfiddle

Answer 6

Sie auch das Element mit dem Standardwert ausgewählt aus der ng-repeat wie Follow setzen können:

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

und vergessen Sie nicht den Wert atribute, wenn Sie Lass es leer, du wirst das gleiche Problem haben.