如何在 Angular 指令中使用 select 选项下拉列表？

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

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

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

如何在 Angular 指令中使用 select 选项下拉列表？

How to use a select option dropdown in an Angular Directive?

angularjs

select

angularjs-directive

angularjs-ng-show