7

バインドされた選択があります

<select ng-model="collegeSelection" ng-options="c as c.CollegeName for c in colleges" ng-selected="c.CollegeName == collegeSelection.CollegeName" name="selectCollege" id="selectCollege"></select>

ただし、両方の c.CollegeName == collegeSelection.CollegeName が一致する場合、アイテムはまだ選択されていません。ドキュメントは役に立たないようです。何か案は？

4

4 に答える 4

22

ng-selected<option>タグではなく、タグで使用する必要があります<select>。そのドキュメントと例を詳しく見てください。

選択したオプションのselectディレクティブの決定はに基づいているためngModelです。したがって、 を削除するng-selected="c.CollegeName == collegeSelection.CollegeName"と、コードが機能するはずです。

ディレクティブで「選択された」機能を示すために、非常に単純なプランクを作成しました。select

詳細:

AngularJS はngModelディレクティブを使用して、モデルと UI 要素間の「双方向データ バインディング」を有効にします。

「select」の場合は、collegeSelection指定した機種<select ng-model="collegeSelection" ...>が選択項目となります。つまり、ユーザーがページのドロップダウンからアイテムを選択すると、collegeSelectionそのアイテムに設定されます。そして、JavaScript コードで項目を設定collegeSelectionすると、AngularJS は対応する項目<option>が選択されていることを確認します。

コントローラーに次のコードがあるとします。

$scope.colleges = [
    {id: 0, name: 'a'},
    {id: 1, name: 'b'},
    {id: 2, name: 'c'}
];

$scope.collegeSelection = $scope.colleges[0];

HTML は次のようになります。

<select ng-model="collegeSelection" ng-options="c as c.name for c in colleges"></select>

それでおしまい！コードを実行すると、colleges 配列の最初の大学が選択されます。

ユーザーが UI でアイテムを選択したか、JavaScript でアイテムを選択したかに関係なく、選択されたオプションであるcollegeSelection ことを覚えておいてください。

これが、双方向データバインディングのしくみです。

于 2013-07-15T04:09:46.697 に答える