0

プランク: http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=preview

  • シンプルなフォームと高度なフォームの 2 つのフォームがあります。
  • どちらにも同じオプションがあります（多くのオプション）
  • 含まれている開始選択タグの違いはわずかです。
<select ng-show="showSimpleSelect"
        ng-model="selected_tag"
        ng-change="changeFormTag(formData)"
        class="form-control manage-source-input-tag">

<!-- if advanced then -->
<select ng-show="showAdvanceSelect"
        ng-model="formData.tag"
        ng-change="changeTag(formData.tag)"
        class="form-control manage-source-input-tag">

            <option value="brand">Brand</option>
            <option value="client">Client</option>
            <option value="companies">Companies</option>
            ...

</select ng-show="showSimpleSelect">
</select ng-show="showAdvanceSelect">

私のディレクティブコントローラーでは、次のような変数を使用して、開始選択タグを表示および非表示にしています。

vs.showSimpleForm = function() {
    vs.showSimpleSelect  = true,
    vs.showAdvanceSelect = false,

ただし、HTML は最終的に次のようになり、デザインが壊れます。 ここに画像の説明を入力

これをどのようにリファクタリングしますか？

4

1 に答える 1

0

Angular は、タグの代わりに属性selectを期待するカスタム ディレクティブとしてタグをオーバーライドします。オプションを配列にハードコードして、それをng-optionsoptionng-option

//controller
$scope.options = ["brand", "client", "companies"];
//html
<select ng-show="showAdvanceSelect"
        ng-model="formData.tag"
        ng-change="changeTag(formData.tag)"
        ng-options="option for option in options"
        class="form-control manage-source-input-tag">
于 2015-03-28T03:25:25.503 に答える