Comment utiliser ng-option pour définir la valeur par défaut d'un élément de sélection ?

Question

J'ai vu la documentation de la directive select d'Angular ici : http://docs.angularjs.org/api/ng.directive:select . Je n'arrive pas à trouver comment définir la valeur par défaut. C'est déroutant :

sélectionner comme étiquette pour une valeur dans un tableau

Voici l'objet :

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

Le html (travail) :

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

puis j'essaie d'ajouter un attribut ng-option à l'intérieur de l'élément de sélection pour définir prop.value comme option par défaut (ne fonctionne pas).

ng-options="(prop.value) for v in prop.values"

Qu'est-ce que je fais mal ?

Answer 1

Donc en supposant que cet objet est dans votre champ d'application :

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

Travailler sur Plunkr : http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

Answer 2

El documentation angulaire pour select * ne répond pas explicitement à cette question, mais elle est présente. Si vous regardez le script.js vous verrez ceci :

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}

Voici le html :

<select ng-model="color" ng-options="c.name for c in colors"></select>

Cela semble être une manière plus évidente d'attribuer par défaut une valeur sélectionnée sur un fichier <select> con ng-options . Cela fonctionnera également si vous avez des étiquettes/valeurs différentes.

* C'est à partir d'Angular 1.2.7

Answer 3

Cette réponse est plus utile lorsque vous apportez des données à partir d'une base de données, que vous effectuez des modifications et que vous persistez ensuite les changements.

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

Consultez l'exemple ici :

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

Answer 4

<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

Answer 5

Si votre tableau d'objets est complexe comme :

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

Et votre modèle actuel était réglé sur quelque chose comme :

$scope.user.friend = {name:John, uuid: 1234};

Cela a aidé d'utiliser le track by sur l'uuid (ou tout autre champ unique), pour autant que le ng-model="user.friend" ait également un uuid :

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>