18

select 要素の初期値を取得しようとすると、値を入力する代わりに、次の画像に示すように奇妙な文字列が追加されます。

ここに画像の説明を入力

JavaScript コードは次のとおりです。

 function appCtrl($scope){
        $scope.teams = [
            {teamId: 10, teamName: 'Foo'},
            {teamId: 20, teamName: 'Bar'},
            {teamId: 30, teamName: 'Steve'},
            {teamId: 40, teamName: 'Jobs'},
            {teamId: 50, teamName: 'Macs'}
        ];

        $scope.filters = {
            teamIdSelected: 20
        };
  }

HTMLは次のとおりです。

<div ng-app ng-controller="appCtrl"> 
    <select class="small" ng-model="filters.teamIdSelected">
        <option ng-repeat="team in teams" value="{{team.teamId}}">{{team.teamName}}</option>
    </select>

デモ用の jsbin を次に示します: http://jsbin.com/EKOpAFI/1/edit

私はまた、信じられないほど文書化されていない選択要素をここで使用しようとしましたが、チーム ID が値であり、チーム名がラベルである場合でも、そのように機能させることはできません。常に配列のインデックスを値として配置したいと考えています。

どんな助けでも大歓迎です。

4

4 に答える 4

26

selectディレクティブは理解するのが本当に少し難しいです。ng-optionsこれがディレクティブと連携してどのように機能するかを示します(これは驚くほど強力です!)

<select 
  ng-model="filters.teamIdSelected"
  ng-options="value.teamId as value.teamName for (key, value) in teams"
  ></select>

開発ツールで選択オプションを検査するときに、DOM で生成された値と混同しないでください。属性はvalue常にインデックスを取得します。対応するキーと値のペアは引き続きスコープに対して評価されるため、「ng-model」を更新するだけで済みます。

お役に立てれば！

于 2013-09-13T21:14:11.113 に答える
5

代わりに、次のように select 要素で ng-options を使用することをお勧めします。

    <select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams"></select>

さらに、「チームの選択」オプションを含めたい場合:

<select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams">
  <option value="">Select Team</options>      
</select>
于 2013-09-13T21:11:22.007 に答える
1

これはあなたが望むものです：

<select class="small" ng-model="filters.teamIdSelected"
    ng-options="t.teamId as t.teamName for t in teams">
</select>

ng-repeatsと一緒に使用しないで<option>ください。

于 2013-09-13T21:10:49.323 に答える
0

この質問には数年前に回答があったことは知っていますが、誰かが同じ問題に遭遇し、解決策がうまくいかない場合は、$index で追跡してみてください。

<select class="small" ng-model="filters.teamIdSelected"
    ng-options="t.teamId as t.teamName for t in teams track by $index">
</select>
于 2021-01-08T15:28:34.250 に答える