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

Angularjs - 动态ng选项

2 个答案: