javascript - 将 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 是一个 bool 值，因此它需要为 multiple="true"。

ng-model 中的

value 不存在于该范围内，因为它只存在于 md-option 中，所以你不能执行过滤[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-item。

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

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