30 
<select ng-model="team.captain" ng-options="player.name for player in team.players"></select>

これにより、チーム キャプテンを選択するための選択リストが正しく作成されます。ただし、デフォルトでは空白のオプションが選択されています。代わりに、リストから最初のプレーヤーを事前に選択するにはどうすればよいでしょうか?

<select ng-model="team.captain" ng-options="player.name for player in team.players" class="ng-pristine ng-valid">
  <option value="0">John</option>
  <option value="1">Bobby</option>
</select>

追加してみましng-init="team.captain='0'"たが、役に立ちませんでした。

更新どうやらこれは次の理由で発生します

ng-model によって参照される値が、ng-options に渡された一連のオプションに存在しません。

出典: AngularJS の select に空のオプションが含まれるのはなぜですか?

しかし、なぜ ng-init を使用してもうまくいかないのかという疑問が残ります。

<select ng-init="team.captain='0'" ng-model="team.captain" ng-options="player.name for player in team.players"></select>
4

6 に答える 6

34

うまくいったのは次のとおりです。

<select ng-init="team.captain=team.players[0]" 
        ng-model="team.captain" 
        ng-options="player.name for player in team.players"></select>

そして、うまくいかなかったもの：

ng-init="team.captain='0'"
ng-init="team.captain='John'"

私の推測では、Angular は値やラベルの単純な比較を超えていると思います。おそらくオブジェクト参照を比較します。

于 2013-01-12T21:02:00.503 に答える
15

AngularJS を使用してドロップダウン メニューを初期化する別の方法を次に示します。

(JS Fiddle での作業例: http://jsfiddle.net/galeroy/100ho18L/1/ )

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app="" ng-controller="myController">

    <select 
        ng-model="carSelection"
        ng-options = "x.make for x in cars">
    </select>

    <script>

        function myController($scope) {

            $scope.cars = [
                {"make": "Nissan", "model": "Sentra"},
                {"make": "Honda", "model": "Prelude"},
                {"make": "Toyota", "model": "Prius"}
            ]

            $scope.carSelection = $scope.cars[1]; // this line initializes the drop down menu
        }

    </script>

</body>

于 2015-01-17T00:12:14.673 に答える
5

@camus がコメントで既に述べたように、モデルをインデックス値ではなく、有効な「ラベル」値 (または参照) に設定する必要があります。HTML でインデックス値が使用されていることがわかるので、これは少し奇妙です。

Angular は、HTML の value 属性を次のように設定します。

  • 配列をデータソースとして使用する場合、それは各反復における配列要素のインデックスになります。
  • オブジェクトをデータソースとして使用する場合、各反復のプロパティ名になります。

アイテムが選択されると、Angular はインデックスまたはプロパティ名に基づいて配列/オブジェクト内の正しいエントリを検索します。

于 2013-01-12T20:52:20.363 に答える
4

この jsfiddleに見られるように、 ng-selectedはどうですか:

<select ng-model="val">
  <option ng-repeat="opt in options" ng-selected="$first">
    {{ opt }}
  </option>
</select>
于 2016-03-12T11:41:44.663 に答える