web-dev-qa-db-fra.com

AngularJs - ng-model dans un SELECT

JSfiddle

Problème:

J'ai un élément SELECT dans ma page, qui est rempli avec un ng-repeat. Il a également un ng-model qui a une valeur par défaut.

Quand je change la valeur, le ng-model s'adapte, c'est bon. Mais la liste déroulante montre un emplacement vide au lancement, où l'élément avec la valeur par défaut devrait être sélectionné.

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>

Avec JS:

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

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

};
javascriptjqueryangularjsangular-ngmodel
55
Jordumus

Vous pouvez utiliser la directive ng-selected sur les éléments d'option. Il faut exprimer que si vérité va définir la propriété sélectionnée.

Dans ce cas:

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

Démo

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>
67
Patrick Evans

essayez le code suivant:

Dans votre contrôleur:

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

Dans votre page:

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

violon de travail

17
carton

Vous n'avez pas besoin de définir des balises d'option, vous pouvez le faire en utilisant la directive ngOptions: 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>
6
Numyx

Cependant, ngOptions offre certains avantages, tels que la réduction de la mémoire et l'augmentation de la vitesse, en ne créant pas de nouvelle portée pour chaque instance répétée. documents angulaires

La solution alternative consiste à utiliser la directive ng-init. Vous pouvez spécifier la fonction qui initialisera vos données par défaut.

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

Voir jsfiddle

3
Aleksey Kiyanov

Vous pouvez également mettre l'élément avec la valeur par défaut sélectionnée dans ng-repeat comme suit:

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

et n'oubliez pas la valeur attribuée si vous laissez le champ vide, vous aurez le même problème.

2
Ze Rubeus

La valeur par défaut de Select doit être l'une de ses valeurs dans la liste. Afin de charger la sélection avec la valeur par défaut, vous pouvez utiliser ng-options . Une variable d'étendue doit être définie dans le contrôleur et cette variable est affectée comme ng-model dans la balise de sélection HTML.

Voir ce plunker pour toutes les références:

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

1
Alhuck A