angularjs - 如何在 Angular 指令中使用选择选项下拉菜单？

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

在我的指令控制器中，我使用这样的变量来显示和隐藏打开的选择标签：

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