如何在Angular Directive中使用选择选项下拉列表？

Question

Plunkr：http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=preview

• 我有两种形式，一种简单而先进的形式。
• 两者都有相同的选项（很多选项）
• 包含
  
的开场选择标记中只有几个不同之处

---

<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">

在我的Directives Controller中，我使用这样的变量来显示和隐藏开始的选择标记：

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

然而，HTML最终看起来像这样，这打破了设计：

你会如何重构这个？

Answer 1

Angular会将select标记覆盖为需要ng-options属性而不是option标记的自定义指令。您可以将选项硬编码到数组中，并将其作为ng-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">