Question

我正在使用AngularJs处理此动态过滤系统，并试图找出如何将color和size选项转换为两个下拉列表（每个类别一个）

我尝试了以下代码，该代码成功地将下拉列表与选择框中的选项一起添加，但是在单击其中一个选项后，它不会选择它。

<md-select ng-model="filter[cat][value]" placeholder="val" multiple>
  <md-option ng-repeat="value in getItems(cat, data)" ng-value="{{value}}" ng-init="filter[cat]={}">
    {{value}}
  </md-option>
</md-select>

演示：https://codepen.io/mikelkel/pen/rwQKRm（上面的代码已从此演示中移除。）

Answer 1

有一些问题：

根据文档，multiple是一个布尔值，因此它需要是multiple =“true”。

getToken()中的value在该范围内不存在，因为它仅存在于ng-model中，因此您无法执行md-option。如果查看filter[cat][value]的文档，您会看到使用多个模型时是一个数组。因此，如果您将md-select设置为ng-model，则其值将类似于filter[cat]。

然后，您可以修改["red","yellow"]，使其与类似属性进行字符串匹配（因此，如果衬衫颜色为红色且filter.color数组包含红色，则返回true）。

我将您的codepen（36.1. Overview of Trigger Behavior）分叉并进行了以下更改：

即使filterByPropertiesMatchingAND不满意我离开了它，但我将ng-init初始化为数组而不是对象。

我删除了md-item。

我将filter[cat]设置为ng-model和filter[cat]

在Javascript中，我修改了您的multiple="true"功能。现在它期望filterByPropertiesMatchingAND包含每个属性的数组（而不是具有颜色名称和布尔值的对象）。我放弃了$scope.filter功能。

Answer 2

使用ng-options中的select而不是ng-repeat标记上的option。 ng-options的语法有点奇怪，但在您的情况下会是这样的：ng-options="value for value in getItems(cat, data)"

阅读ngOption https://docs.angularjs.org/api/ng/directive/ngOptions

的文档

至于为什么上面的尝试不起作用，可能与ng-init有关，正在为每个选项执行，并且可能会消除任何现有数据。请勿使用ng-init。

将md-switch转换为md-select

2 个答案: