web-dev-qa-db-fra.com

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 angular select ici: http://docs.angularjs.org/api/ng.directive:select . Je ne vois pas 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 (fonctionne): 

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

et puis j'essaye d'ajouter un attribut ng-option dans l'élément select 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?

angularjs
134
François Romain

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

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

123
James Kleeh

La documentation angular 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 un moyen plus évident de remplacer une valeur sélectionnée sur un <select> avec ng-options. En outre, cela fonctionnera si vous avez différentes étiquettes/valeurs.

* Ceci provient de Angular 1.2.7

67
Jess

Cette réponse est plus utile lorsque vous importez des données 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>

Vérifiez l'exemple ici: 

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

37
Humberto Morera
<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>
21
nirav

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é à utiliser la fonction track by sur uuid (ou n'importe quel champ unique), tant que ng-model = "user.friend" a aussi un uuid

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>
21
BatteryAcid
<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>

Il suffit d'ajouter une option avec une valeur vide. Ça va marcher.

DEMO Plnkr

10
Surya R Praveen

J'ai eu du mal à résoudre ce problème pendant quelques heures. J'aimerais donc apporter quelques éclaircissements. Tous les exemples cités ici concernent les cas où les données sont chargées à partir du script lui-même et non pas celles provenant d'un service ou d'une base de données. Je souhaite donc partager mon expérience avec tous ceux qui ont le même problème que moi.

Normalement, vous n'enregistrez que l'identifiant 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 html partiel model.html

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

fondamentalement, je voulais pointer ce morceau "model.id_model as model.name pour le modèle dans les modèles" la "model.id_model"utilise l'ID du modèle pour la valeur afin que vous puissiez faire correspondre le"mainObj.id_model"qui est aussi le"modèle_sélectionné", c'est juste une valeur simple, aussi"comme model.name"est l'étiquette du répéteur, enfin"modèle dans les modèles"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

10
Coronellx

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 devez inclure data-ng-model

8
WMios

L'attribut ng-model définit l'option sélectionnée et vous permet également de diriger un filtre tel que 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];
3
David Douglas

Si quelqu'un exécute occasionnellement une valeur par défaut non renseignée sur la page dans Chrome, IE 10/11, Firefox - essayez d'ajouter cet attribut à votre champ de saisie/sélection en recherchant la variable renseignée dans le code HTML, comme alors:

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

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 modèle ng "embauché".

    $scope.hired = "ME";

Bonne chance!!! C'est vraiment facile!

0
Jenna Leaf

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