0

我正在研究这个动态过滤系统，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 （以上代码已从此演示中删除。）

4

2 回答 2

1

有几个问题：

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

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

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

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

尽管ng-init对我离开它不满意，但我将它初始化filter[cat]为一个数组而不是一个对象。

我删除了 md 项目。

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

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

于 2017-07-11T16:32:12.477 回答
0

ng-options在标签上select而不是ng-repeat在option标签上使用。for 的语法ng-options有点奇怪，但在你的情况下它会是这样的：ng-options="value for value in getItems(cat, data)"

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

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

于 2017-07-10T23:48:10.150 回答