web-dev-qa-db-ja.com

ng-optionsバウンド選択要素の選択値の設定

関連するコードをいじる： http://jsfiddle.net/gFCzV/7/

Ng-repeatで参照されるオブジェクトの子コレクションにバインドされたドロップダウンの選択値を設定しようとしています。選択したオプションを設定する方法がわかりません。なぜなら、私が知っている方法でバインドされているコレクションを参照できないからです。

[〜＃〜] 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"
    }];
});

これは、モデルのSelectedIndexでng-initを実際に使用する必要がある1つのケースですか？

angularjsng-options
32
sonicblis

AngularJS 1.2を使用している場合、 'track by'を使用してAngularオブジェクトの比較方法を指定できます。

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

更新されたフィドル http://jsfiddle.net/gFCzV/34/

78
Richard Houltz

IDフィールドを等式識別子として使用できます。 AngularJSはオブジェクトを比較するときにreferences equalityをチェックするため、この場合はアドホックオブジェクトを使用できません。

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

選択した値にng-selectedを使用します。 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