BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] AngularJSとng-repeatによるselectの初期化

2022-06-07 06:27:09

質問

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

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

AngularJsでよくあるスコープ/プロトタイプ継承の問題とは関係ないと思うのですが。少なくとも、Batarangで検査しても明らかなものは見当たりません。さらに、UIでselectでオプションを選ぶと、モデルは正しく更新されます。

これがその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/

どのように解決するのですか？

OKです。正しい方法を使いたくない場合は ng-options を追加することができます。 ng-selected 属性に条件チェックのロジックを追加して option ディレクティブの条件チェックロジックを追加して、プリセレクトを動作させることができます。 

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

動作デモ

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します