Angularjs - dynamic ng-options

Question

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

求求你，你知道吗？

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

Answer 2

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

我尝试实现了Andrew丘奇的基于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/您需要的任何值。Angular已经有了用ng-if隐藏/显示option元素的内置功能。