将md-switch转换为md-select

我正在使用AngularJs使用此动态过滤器系统，并试图找出如何将color和size选项转换为两个下拉列表（每个类别一个）。将md-switch转换为md-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

来源

2017-07-10 Mikel

是否有一个特定的原因，你不使用ng选项？ – Chet

嗨@Chet我仍然熟悉Angular。你可以建议我如何使用ng选项吗？ – Mikel

有几个问题：

根据该文件，多是布尔所以它需要多个=“真”。

value在ng-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-item。

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

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

来源

2017-07-11 16:32:12 Chet

非常感谢，@Chet！ – Mikel

使用ng-options在select而非ng-repeat在option标签。为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-10 23:48:10 Chet

谢谢！我会进一步研究你的建议和参考文件。 – Mikel

嗨@Chet，我已经尝试了多种修改md-select的变体来让它工作，但我没有运气。上面链接的演示有我最后一次尝试包括md-select。你介意进一步解释还是提供一个工作的例子？ – Mikel

我错误地选择了md-select进行常规选择，所以我的答案确实完全错误。我要添加另一个可能更好的帮助。 – Chet

将md-switch转换为md-select

回答

相关问题