137

AngularJS 1.1.5 で ng-repeat を使用して、事前に入力されたオプションから選択ボックスを開始しようとしています。代わりに、選択は常に何も選択されていない状態で開始されます。また、空のオプションもありますが、これは望ましくありません。何も選択されないという副作用があると思います。

ng-repeat の代わりに ng-options を使用してこれを機能させることができますが、この場合は ng-repeat を使用したいと考えています。私の絞り込んだ例ではそれが示されていませんが、各オプションのタイトル属性も設定したいのですが、私の知る限り、ng-options を使用してそれを行う方法はありません。

これは、一般的な AngularJs のスコープ/プロトタイプの継承の問題とは関係がないと思います。少なくとも、Batarang で調べてみると明らかなことは何もありません。さらに、UI を使用して選択でオプションを選択すると、モデルは正しく更新されます。

HTMLは次のとおりです。

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

そして JavaScript:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

このための JS フィドル: http://jsfiddle.net/coverbeck/FxM3B/2/

4

6 に答える 6

36

select タグの場合、angular は ng-options ディレクティブを提供します。オプションを設定し、デフォルトを設定するための特定のフレームワークを提供します。期待どおりに動作する ng-options を使用した更新されたフィドルは次のとおりです: http://jsfiddle.net/FxM3B/4/

更新された HTML (コードは同じまま)

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>
于 2013-09-05T22:57:18.667 に答える
10

angular が select に空のオプション要素を挿入しているという事実は、デフォルトでそれにバインドされているモデル オブジェクトが、初期化時に空の値を持つことです。

デフォルトのオプションを選択したい場合は、おそらくコントローラーのスコープで設定できます

$scope.filterCondition.operator = "your value here";

空のオプションプレースホルダーが必要な場合、これは私にとってはうまくいきます

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>
于 2015-02-10T06:49:26.347 に答える
1

Angular Material から md-select および ng-repeat ing md-option を使用している場合は、このペンng-model-options="{trackBy: '$value.id'}"に示されている md-select タグ ash に追加できます。

コード：

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
  <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
  <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>

于 2016-07-28T14:49:26.290 に答える