将 md-switch 转换为 md-select

Question

我正在使用 AngularJs 开发这个动态过滤系统，并试图弄清楚如何将 color 和 size 选项转换为两个下拉列表（每个下拉列表一个）类别）。

我已经尝试了以下代码，它确实成功地添加了下拉列表以及 select 框中的选项，但是在单击其中一个选项后，它并没有 select .

<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

在 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.

Answer 2

有几个问题：

根据文档，multiple 是一个布尔值，所以它需要 multiple="true".

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

然后您可以修改 filterByPropertiesMatchingAND 以便它针对类似的属性进行字符串匹配（因此，如果衬衫颜色是红色并且 filter.color 数组包含红色，那么您将 return正确）。

我 fork 你的 codepen (https://codepen.io/czema/pen/KqbpPE) 并做了以下更改：

尽管 ng-init 不受欢迎，但我还是把它留下了，但我将 filter[cat] 初始化为一个数组而不是一个对象。

我删除了 md-item。

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

在Javascript我修改了你的filterByPropertiesMatchingAND功能。现在它期望 $scope.filter 包含每个属性的数组（而不是具有颜色名称和布尔值的对象）。我删除了 noSubFilter 函数。

将 md-switch 转换为 md-select

Converting md-switch to md-select

javascript

angularjs

md-select