web-dev-qa-db-ja.com

Angularjs-動的なngオプション

私が書いているディレクティブの必要性のために、私は動的にng-options式を構築しなければなりません。これが私が試したものです。

私のディレクティブでは：

// ... scope.labelProperty = 'name';
scope.selectOptions = "l." + scope.labelProperty + " for l in list";

私のhtmlテンプレートでは：

<select class="form-control"
    ng-model="selected.available"
    ng-options="{{ selectOptions }}"
    multiple
    size="5"></select>

これにより、ng-optionsは正しい式「l.namefor l in list」を取りますが、オプションは表示されません。

どうか、何か考えはありますか？

javascriptangularjsselectdynamicng-options
12
Steph.D

コードを次のように変更します（JavaScriptを使用してプロパティを選択します）：

// ... scope.labelProperty = 'name';
scope.selectOptions = "l[labelProperty] for l in list";

<select class="form-control"
    ng-model="selected.available"
    ng-options="{{ selectOptions }}"
    multiple
    size="5"></select>
10
Andrew Church

これは古い質問ですが、私の課題に対する回答の多くは、古いStackoverflowの質問の回答からのものであり（これが他の誰かを助けることになるかどうかは誰にもわかりません！）、これを行う方法を理解するのに時間がかかりました。この検索で​​学んだ専門用語である「カスケードドロップダウンメニュー」の概念を調べた後、以下の解決策を思いつきました。それは最善の方法ではないかもしれませんが、今のところ思いつくことができ、インターネットでそのような例を見たことがなかったので、共有したいと思いました。

Andrew Churchの式ベースのng-optionsを実装してみましたが、selectでこれを実行すると、

ng-options="{{ selectOptions }}"

SelectOptionsがコントローラーで次のように定義されているとします。

$scope.selectOptions = "product.description for product in productList"

その後、コードで変更します。別のドロップダウンメニューでユーザーが選択できるように、次のようにします。

$scope.selectOptions = "cat.name for cat in catList"

ブラウザ開発者ツールで（またはソースコードを見て）select要素を検査すると、select要素が実際に「ng-options = "cat.name for cat in catList"」で読み取られることがわかりますが、要素は、新しいオプションを表示するために更新されません。つまり、-Angularは、変更時にng-options関数を再実行しません。

これを実行するためのより動的な方法で、更新の問題がないことがわかりました。代わりに、ng-optionsではなく、option要素自体を次のように制御しました。

<select class="form-control"
    ng-model="selected.available">
<option ng-if="selectOptions == 'products'" ng-repeat="product in productList" value="{{product}}">{{product.name}}</option>
<option ng-if="selectOptions == 'cats'" ng-repeat="cat in catList" value="{{cat}}">{{cat.name}}</option>
</select>

このように、別のドロップダウンメニューでng-changeを設定して、selectOptionsを製品/猫/必要なものに設定する関数を呼び出すことができます。 Angularには、ng-ifを使用してオプション要素を非表示/表示することを認識する組み込みの機能がすでにあります。

4
IfTrue