web-dev-qa-db-ja.com

ng-optionsでデフォルト値を設定する方法

Anglejsのデフォルト値でドロップダウンリストを設定できます。

 <select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id">
    <option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option>
 </select>

ng-optionsを使用して同じことを実現するにはどうすればよいですか？私は、

 <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = option.id"  
   ng-options="option.name for option in data track by option.id">
</select>

しかし、役に立たない。サンプル フィドルはこちら

javascriptangularjsionic-frameworkhtml-selectng-options
11
mpsbhat

ng-initを使用して、ng-optionsのデフォルト値を設定します。

ここにあります： demo

<select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = data[0].id"  
   ng-options="option.id as option.name for option in data">          
</select>
19
Upal Roy

このすべてがng-initの使用を逃しています。

angularドキュメントから：

このディレクティブは、テンプレートに不必要なロジックを追加するために悪用される可能性があります。以下のデモに見られるように、ngRepeatの特別なプロパティのエイリアスなど、ngInitの適切な使用法はわずかです。サーバー側のスクリプトを介してデータを注入します。これらのいくつかのケースに加えて、ngInitではなくコントローラーを使用して、スコープの値を初期化する必要があります。

ソースドキュメント

私の意見では、デフォルト値を設定する正しい方法は、ng-modelプロパティにng-optionsから選択した値を事前に入力することです。残りはangularが行います。

基本的に、$scopeプロパティを定義すると、selectはバインドしてdata配列からデフォルト値を割り当てます。 data配列がajaxリクエストからのものである場合は、dataを取得したら割り当てます。

.controller('test', ['$scope', function ($scope) {
    $scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}];
    $scope.repeatSelect= $scope.data[0];
}]);

注意すべき点が1つあります。式にasキーWordを使用する場合、ng-modelに選択するように指示する実際のプロパティを割り当てる必要があります。

両方のデモをご覧ください： http://jsfiddle.net/kb99gee8/

8
ste2425

あなたがあなたのコードとng-optionsを使ってあなたが必要とするものを達成しました、あなたが言及したように、ここにあります Working Fiddle

完全なコード

<div ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="repeatSelect">Angular select:</label>
            <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = data[0]"  
   ng-options="option.name for option in data track by option.id">
</select>
        </form>
        <br/> <tt>Selected value: {{repeatSelect.id}}</tt>

    </div>
</div>
<br/>
1
Manoj Salvi

HTMLパーツの例を提案します

<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists"  ng-change="getmediationRooms(data.selectedOption)"></select>

私のコントローラーで

$ scope.data = {selectedOption：$ scope.venueNamelists [i] .name};

モデル値は、venueNamelistsのキーと値のペアに等しくなければなりません。

0
athira renjan