web-dev-qa-db-fra.com

Définition des valeurs sélectionnées pour les éléments de sélection liés à ng-options

Violon avec le code correspondant: http://jsfiddle.net/gFCzV/7/

J'essaie de définir la valeur sélectionnée d'un menu déroulant lié à une collection enfant d'un objet référencé dans une répétition ng. Je ne sais pas comment définir l'option sélectionnée car je ne peux pas faire référence à la collection à laquelle elle est liée de quelque manière que ce soit à ma connaissance.

[~ # ~] html [~ # ~] :

<div ng-app="myApp" ng-controller="SomeController">
    <div ng-repeat="Person in People">
        <div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
        <div class="listitem" ng-repeat="Choice in Person.Choices">
            {{Choice.Name}}: 
            <select 
                ng-model="Choice.SelectedOption"                 
                ng-options="choice.Name for choice in Choice.Options"></select>
            {{Choice.SelectedOption.ID}}
        </div>
    </div>
</div>

[~ # ~] js [~ # ~] :

var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
    $scope.People = [{
        "firstName": "John",
        "lastName": "Doe",
        "Choices": [
            {
                "Name":"Dinner",
                "Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}],
                "SelectedOption":{Name:"Chicken",ID:2} //this doesn't work
            },
            {
                "Name":"Lunch",
                "Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}],
                "SelectedOption":""
            }
        ],        
    }, {
        "firstName": "Jane",
        "lastName": "Doe"
    }];
});

Est-ce le seul cas où je devrais utiliser ng-init avec un SelectedIndex sur le modèle?

angularjsng-options
32
sonicblis

Si vous utilisez AngularJS 1.2, vous pouvez utiliser "piste par" pour dire à Angular comment comparer des objets.

<select 
    ng-model="Choice.SelectedOption"                 
    ng-options="choice.Name for choice in Choice.Options track by choice.ID">
</select>

Violon mis à jour http://jsfiddle.net/gFCzV/34/

78
Richard Houltz

Vous pouvez utiliser le champ ID comme identifiant d'égalité. Vous ne pouvez pas utiliser l'objet ad hoc dans ce cas car AngularJS vérifie égalité de références lors de la comparaison d'objets.

<select 
    ng-model="Choice.SelectedOption.ID" 
    ng-options="choice.ID as choice.Name for choice in Choice.Options">
</select>
32
zs2020

Utiliser ng-selected pour la valeur sélectionnée. J'ai implémenté avec succès du code dans AngularJS v1.3.2

<select ng-model="objBillingAddress.StateId"  >
   <option data-ng-repeat="c in States" value="{{c.StateId}}" ng-selected="objBillingAddress.BillingStateId==c.StateId">{{c.StateName}}</option>
                                                </select>
10
Rajeev