将md-开关转换为md-选择

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“。

value in ng-model不存在于该范围内，因为它只存在于md-option中，因此不能执行filter[cat][value]。如果您查看md-select的文档，您将看到当使用多个模型时，模型是一个数组。因此，如果您将ng-model设置为简单的filter[cat]，那么它的值将类似于["red","yellow"]。

然后，您可以修改filterByPropertiesMatchingAND，使其与类似的属性进行字符串匹配(因此，如果恤颜色为红色，而filter.color数组包含红色，则返回true)。

我对您的代码页(https://codepen.io/czema/pen/KqbpPE)进行了分叉，并做了以下更改：

即使对ng-init不感兴趣，我还是保留了它，但是我将filter[cat]初始化为数组而不是对象。

我把md的东西拿走了。

我将ng-model设置为filter[cat]和multiple="true"

在Javascript中，我修改了filterByPropertiesMatchingAND函数。现在，它希望$scope.filter包含每个属性的数组(而不是一个具有颜色名称和布尔值的对象)。我删除了noSubFilter函数。

Answer 2

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

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

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