13

为了需要我正在编写的指令，我必须动态构造 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”，但选项不显示。

请问，有什么想法吗？

4

2 回答 2

11

将您的代码更改为如下所示（使用 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>
于 2014-05-15T20:09:18.690 回答
4

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

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

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 隐藏/显示选项元素。

于 2015-08-14T12:41:30.833 回答