Angularjs - 动态 ng 选项答案

【问题标题】：Angularjs - dynamic ng-optionsAngularjs - 动态 ng 选项
【发布时间】：2014-07-04 10:37:40
【问题描述】：

由于需要我正在编写的指令，我必须动态构造 ng-options 表达式。这是我尝试过的。

在我的指令中：

// ... scope.labelProperty = 'name';
scope.selectOptions = "l." + scope.labelProperty + " for l in list";

在我的 html 模板中：

<select class="form-control"
    ng-model="selected.available"
    ng-options="{{ selectOptions }}"
    multiple
    size="5"></select>

这会导致 ng-options 采用正确的表达式“l.name for l in list”，但不会显示选项。

请问有什么办法吗？

【问题讨论】：

这可能有助于bennadel.com/blog/…

标签： javascript angularjs select dynamic ng-options

【解决方案1】：

将您的代码更改为如下所示（使用 javascript 选择您的属性）：

// ... scope.labelProperty = 'name';
scope.selectOptions = "l[labelProperty] for l in list";

<select class="form-control"
    ng-model="selected.available"
    ng-options="{{ selectOptions }}"
    multiple
    size="5"></select>

【讨论】：

看看@一个类似的问题并分享想法...stackoverflow.com/questions/26125226/…

【解决方案2】：

我知道这是一个老问题，但我的许多挑战的答案来自过时的 Stackoverflow 问题答案（所以谁知道这是否最终会帮助其他人！）我花了一段时间才弄清楚该怎么做这。在研究了“级联下拉菜单”的概念后，我提出了以下解决方案——这是我在这次搜索中学到的一个技术术语。这可能不是最好的方法，但这是我目前能想到的最好的方法，而且我还没有在互联网上看到过这样的例子，我想我会分享。

我尝试实现 Andrew Church 的基于表达式的 ng-options，但我发现如果你在选择中执行此操作：

ng-options="{{ selectOptions }}"

假设 selectOptions 在您的控制器中定义为：

$scope.selectOptions = "product.description for product in productList"

然后你稍后在代码中更改它，让用户在另一个下拉菜单上选择：

$scope.selectOptions = "cat.name for cat in catList"

如果您在浏览器开发人员工具中检查 select 元素（或通过查看源代码），您会发现 select 元素现在实际上读取的是 'ng-options="cat.name for cat in catList" ' 但不会刷新元素以显示新选项。也就是说 - Angular 不会在更改时重新运行 ng-options 函数。

我发现执行此操作的一种更动态的方法是不存在任何刷新问题，而不是控制 ng-options，而是控制选项元素本身，如下所示：

<select class="form-control"
    ng-model="selected.available">
<option ng-if="selectOptions == 'products'" ng-repeat="product in productList" value="{{product}}">{{product.name}}</option>
<option ng-if="selectOptions == 'cats'" ng-repeat="cat in catList" value="{{cat}}">{{cat.name}}</option>
</select>

这样，您可以在另一个下拉菜单上设置 ng-change 以调用将 selectOptions 设置为 products/cats/whatever 您需要的函数。 Angular 已经具有内置功能，可以知道使用 ng-if 隐藏/显示选项元素。

【讨论】：