Angularjs - 动态ng选项

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问题答案（所以谁知道这最终会帮助其他人！）我花了一段时间才弄清楚如何做到这一点。 在研究了“级联下拉菜单”的概念之后，我提出了以下解决方案 - 这是我在此搜索中学到的技术术语。 它可能不是最好的方式，但它是我现在能想到的最好的，并且没有在互联网上看到类似的例子，我以为我会分享。

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

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