angularjs - NG-model w SELECT

Question

JSfiddle

Problem:

Mam select-element mojej stronie, która jest wypełniona wz ng-repeat. Ma również wartość ng-model, która ma wartość domyślną.

Kiedy zmieniam wartość, ng-model dostosowuje się, to jest w porządku. Ale lista rozwijana pokazuje puste miejsce przy uruchomieniu, w którym powinien znajdować się element z ustawioną wartością domyślną.

Kod

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

z 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

Można użyć dyrektywy ng-selected na elementach opcjonalnych. Wyraża się, że jeśli prawda ustawi wybraną właściwość.

W tym przypadku:

<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

spróbować następujący kod:

w kontroler:

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

W swojej strony:

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

Working Fiddle

Answer 3

Wybierz za wartość domyślna powinna być jednym z jego wartości na liście. Aby załadować select z wartością domyślną, możesz użyć opcji ng-options. Zmienna zakresu musi być ustawiona w kontrolerze i ta zmienna jest przypisana jako ng-model w znaczniku HTML.

Zobacz plunker wszelkich odniesień:

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

Answer 4

Nie trzeba zdefiniować znaczniki opcji, można to zrobić za pomocą ngOptions dyrektywy: 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

Jednak ngOptions zapewnia pewne korzyści, takie jak zmniejszenie ilości pamięci i zwiększenie prędkości, ponieważ nie tworzy nowego zakresu dla każdej powtarzanej instancji. angular docs

Alternatywnym rozwiązaniem jest zastosowanie dyrektywy ng-init. Możesz określić funkcję, która będzie inicjować twoje domyślne dane.

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

Zobacz jsfiddle

Answer 6

Można również umieścić przedmiot o wartości domyślnej wybranego z NG-powtarzają jak następujące:

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

i nie zapomnij atribute wartość, jeśli zostaw to puste, będziesz miał ten sam problem.