AngularJS - 设置控制器的默认多 select 下拉值

Question

我正在使用来自以下来源的 AngularJS multi select 下拉代码： MultiSelectDropDown

我在同一个 html 页面中两次使用同一个下拉菜单。我想显示第一个多 select 下拉列表的默认 selected 下拉名称为“项目”，第二个为“环境”。

multiselect.js 文件中的代码使用指令，scope.header 默认设置为“Select”，我想更改默认名称“[=30=” ]”到我的 html 页面中的“项目”和“环境”。

我需要你的帮助来更新它，要么使用 html 页面中的 multiselect 语法，要么从控制器传递 scope.header 值。

Answer 1

概览

字符串值 'Select' 被硬编码到指令中。您将需要修改代码以使其动态化。

代码

这里是我如何改变它的。

https://plnkr.co/edit/J4CBblcfdDcrvE6K?preview

Index.html

我添加了 header 属性和我希望它显示的文本。

第 17-24 行

  <multiselect class="input-xlarge" multiple="true"
        ng-model="selectedCar"
        header="Cars"
        options="c.name for c in cars"
        change="selected()" ></multiselect>
        <div class="well well-small">
            {{selectedCar}}
        </div>

multiselect.js

我将 scope.header 设置为属性，如果没有给出则默认为 'Select'。

第 45 行

scope.header = attrs.header || 'Select';

第 119 行

if (!modelCtrl.$modelValue || !modelCtrl.$modelValue.length) return scope.header = attrs.header || 'Select';