web-dev-qa-db-ja.com

AngularJsと<select>：デフォルトの選択オプションが削除されました

次のコードは、デフォルトで3番目のオプションが選択された状態でドロップダウンリストをレンダリングすることを期待しています。ただし、selectをangularjsにバインドすると、デフォルトの選択が消えます。何か考えは？

var myApp = angular.module('myApp', []);

...

<div>
  <select id="myselection" ng-model="selectedColors">
    <option value="1" >Red</option>
     <option value="2">Blue</option>
     <option value="3" selected="selected">Green</option>
  </select>

  <div>
    Selected Colors: {{selectedColors }}
  </div>
</div>

これが実際の例です： http://jsfiddle.net/TXPJZ/134/

ありがとう！

angularjshtml-select
13
Ivo

実装を修正する最も簡単な方法は、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 [〜＃〜] でお試しください。

22
zs2020

選択範囲をモデルにバインドすると、Angularは「selected」プロパティをオーバーライドします。レンダリングされた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;
}]);

以下は実行例です。

http://jsfiddle.net/93926/

または、次の例のように、ng-initを使用して初期化することもできます。

<div ng-init="selectedColors=3">

http://jsfiddle.net/9JxqA/1/

編集：最初の例で選択されたプロパティを削除しました、それはもう必要ありません。

10
Brendan

2つのことだけを行う必要があります1）ng-init = "days = 'noday'" 2）ng-selected = "true"

 <select class="filtersday" ng-init="days='noday'" ng-model="days">
 <option ng-selected="true" value="noday">--Select Day--</option>
2
Deepak Dholiyan

空の値を選択して選択するオプションを追加し、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>

Fiddle http://jsfiddle.net/CodecPM/qxyckf7u/ で試してください

2
CodecPM

ごとに機能するには、単一引用符を使用する必要があります

<select ng-model="liveDataType" ng-init="liveDataType='1'" class="form-control input height" required>
    <option value="1">Running data</option>
    <option value="2">Rest Data</option>
    <option value="3">All Data</option>
</select>
1
Majedur Rahaman

Ng-selected = "true"を使用します

以下のコードを確認してください：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select ng-model="foo" ng-app >
    <option value="1">1</option>
    <option ng-selected="true" value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
0
Suraj Sangani