将 md-switch 转换为 md-select

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

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

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

我 fork 你的 codepen (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 中使用ng-options，而不是在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 正在为每个选项执行并且可能正在清除所有现有数据。不要使用ng-init。