comment utiliser ng-option pour définir la valeur par défaut de l'élément select

J'ai vu la documentation de la directive de sélection angulaire ici: http://docs.angularjs.org/api/ng.directive:select . Je ne peux pas comprendre comment définir la valeur par défaut. Ceci est déroutant:

sélectionner comme étiquette pour la valeur dans le tableau

Voici l'objet:

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

Le html (fonctionnant):

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

puis j'essaye d'ajouter un attribut ng-option à l'intérieur de l'élément select à définir prop.valuecomme option par défaut (ne fonctionne pas).

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

Qu'est-ce que je fais mal?

Donc, en supposant que cet objet est dans votre portée:

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

Plunkr fonctionnant: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

La documentation angulaire de select * ne répond pas explicitement à cette question, mais elle est là. 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
}

C'est le html:

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

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

* Ceci est de Angular 1.2.7

Cette réponse est plus utile lorsque vous importez des données à partir d'une base de données, effectuez des modifications, puis persistez les modifications.

 <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

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

Si votre tableau d'objets est complexe comme:

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

Et votre modèle actuel a été défini sur quelque chose comme:

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

Cela a aidé à utiliser la track byfonction sur uuid (ou n'importe quel champ unique), tant que ng-model = "user.friend" a également un uuid:

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

J'ai eu du mal avec cela pendant quelques heures, alors je voudrais ajouter quelques clarifications à ce sujet, tous les exemples notés ici, se réfèrent à des cas où les données sont chargées à partir du script lui-même, pas quelque chose venant d'un service ou d'une base de données, je voudrais donc partager mon expérience avec toute personne ayant le même problème que moi.

Normalement, vous enregistrez uniquement l'id de l'option souhaitée dans votre base de données, alors ... montrons-le

service.js

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

Enfin le modèle partiel html.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

fondamentalement, je voulais pointer cette pièce " model.id_model comme model.name pour le modèle dans les modèles " le " model.id_model " utilise l'id du modèle pour la valeur afin que vous puissiez correspondre avec le " mainObj.id_model " qui est également le " selected_model ", c'est juste une valeur simple, aussi " as model.name " est le libellé du répéteur, enfin " model in models " est juste le cycle régulier que nous connaissons tous.

J'espère que cela aide quelqu'un, et si c'est le cas, veuillez voter: D

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

Ajoutez simplement une option avec une valeur vide. Ça va marcher.

DÉMO Plnkr

Un moyen plus simple de le faire est d'utiliser data-ng-init comme ceci:

<select data-ng-init="somethingHere = options[0]" data-ng-model="somethingHere" data-ng-options="option.name for option in options"></select>

La principale différence ici est que vous devrez inclure data-ng-model

L' attribut ng-model définit l'option sélectionnée et vous permet également de diriger un filtre comme orderBy: orderModel.value

index.html

<select ng-model="orderModel" ng-options="option.name for option in orderOptions"></select>

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];

Si quelqu'un rencontre parfois la valeur par défaut qui n'est pas renseignée sur la page dans Chrome, IE 10/11, Firefox - essayez d'ajouter cet attribut à votre champ de saisie / sélection en vérifiant la variable renseignée dans le HTML, comme ceci:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

Vraiment simple si vous ne vous souciez pas d'indexer vos options avec un identifiant numérique.

1. Déclarez votre tableau $ scope var - people

   $scope.people= ["", "YOU", "ME"];

2. Dans le DOM de la portée ci-dessus, créez un objet

   <select ng-model="hired" ng-options = "who for who in people"></select>

3. Dans votre contrôleur, vous définissez votre ng-modèle "embauché".

   $scope.hired = "ME";

Bonne chance!!! C'est vraiment simple!

Juste pour ajouter, j'ai fait quelque chose comme ça.

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>