37313 次
6 に答える
23
実装を修正する最も簡単な方法は、 を使用することng-init
です。
<div>
<select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
</div>
FIDDLEで試してみてください。
于 2013-07-26T23:21:52.397 に答える
10
選択をモデルにバインドすると、Angular は「選択された」プロパティをオーバーライドします。レンダリングされた DOM を調べると、新しい項目が追加されていることがわかります。
<option value="? undefined:undefined ?"></option>
3 番目のオプションを自動的に選択するには、スコープ内のモデルを事前設定する必要があります。select をコントローラーでラップするなど、これを行うにはいくつかの方法があります。
<div ng-controller="MyCtrl">
<select id="myselection" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
そして、コントローラーでそのモデルを定義します。
var myApp = angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.selectedColors = 2;
}]);
実行例を次に示します。
または、次の例のように ng-init を使用して初期化することもできます。
<div ng-init="selectedColors=3">
編集: 最初の例で選択したプロパティを削除しました。もう必要ありません。
于 2013-07-26T23:02:25.167 に答える
2
select に空の値を持つオプションを追加し、selectedColors を空の文字列 (ng-init="selectedColors=''") に初期化することで、最初の色がデフォルトで選択されるのではなく、上部に「色の選択」オプションが表示されます。
<div>
<select id="myselection" ng-init="selectedColors=''" ng-model="selectedColors">
<option value="">Select Color</option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
于 2015-09-15T12:54:37.603 に答える