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

J'ai lutté avec cela pendant quelques heures, donc je voudrais ajouter quelques clarifications pour cela, tous les exemples notés ici, se réfère à 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, donc je voudrais fournir mon expérience pour toute personne ayant le même problème que moi.

Normalement, vous enregistrez seulement l'id de l'option désiré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 modèle.html

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

En fait, je voulais souligner que cette pièce " model.id_model as model.name for model in models " le " modèle.id_modèle "utilise l'identifiant du modèle pour la valeur afin que vous puissiez le faire correspondre avec la méthode " mainObj.id_model "qui est aussi le " modèle_sélectionné ", il s'agit juste d'une valeur ordinaire, de même que " comme model.name "est l'étiquette pour le répéteur, enfin " modèle dans modèles " est juste le cycle régulier que nous connaissons tous.

J'espère que cela aidera quelqu'un, et si c'est le cas, merci de voter en faveur du projet :D

Answer 2

<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. Cela fonctionnera.

Plnkr DEMO

Answer 3

Une façon plus simple de le faire est d'utiliser data-ng-init comme ça :

<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

Answer 4

El ng-model définit l'option sélectionnée et vous permet également de mettre en place 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];

Answer 5

Si quelqu'un rencontre le problème de la valeur par défaut qui n'est parfois pas remplie sur la page dans Chrome, IE 10/11, Firefox, essayez d'ajouter cet attribut à votre champ de saisie/sélection pour vérifier la variable remplie dans le HTML, comme suit :

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