我正在使用 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 (以上代码已从此演示中删除。)
最佳答案
有几个问题:
根据文档,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
函数。
关于javascript - 将 md-switch 转换为 md-select,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45022838/