我应该如何在角度材料中实现多项选择选项？

Posted 2023-02-22

【中文标题】我应该如何在角度材料中实现多项选择选项？

【英文标题】：How am I supposed to implement multiple select option in angular-material?

【发布时间】：2015-04-23 17:22:12

【问题描述】：

我已经检查了文档和演示，但是唉！！我还没有找到任何关于使用 angular-material 实现多选选项（如 select 2）的参考。 谁能告诉我如何使它工作？

【问题讨论】：

稍微补充一下问题：从 0.8.3 开始，文档不提供“多个”的演示。使用 multiple 属性作为布尔选项失败：它似乎是基于存在的（这是纯粹的邪恶，我必须补充）。

【参考方案1】：

我使用以下内容允许我使用 ng-repeat 以及一些多重的 md-select 和一些不是的（从 Angular 1.4.7 开始）：

index.html

<md-input-container ng-repeat="item in items track by $index">
        <label>item.title</label>
            <div ng-include="item.multiselect == 'true' ? 'm_selectfragment.html' : 's_selectfragment.html'"></div>
   </md-input-container>

javascript

$scope.items = 
        [title: 'funny',
        selected: '', 
        names: [
            name: 'some name', 
            name: 'other name',
            name: 'more?', 
            name: 'say wha???'             
            ],
         multiselect: "false"   
        , 
        title: 'serious', 
        selected: '', 
        names: [
           name: 'Obama',
        name: 'Trump',
        name: 'Hillary',
        name: 'Putin'               
            ],
         multiselect: "true"   
        ];

m_selectfragment.html

<md-select name="item.title" ng-model="item.selected" multiple="true">
<md-option ng-repeat="name in item.names" value="name.name">name.name
</md-option>

s_selectfragment.html

<md-select name="item.title" ng-model="item.selected">
<md-option ng-repeat="name in item.names" value="name.name">name.name
</md-option>

【参考方案2】：

Splaktar 的回答是正确的：只需将 multiple 添加到您的 md-select。

用于工作解决方案的 Codepen：http://codepen.io/ansgar-john/pen/RWPVEO?editors=101

HTML

<div>
  <md-input-container>
    <md-select multiple ng-model="ctrl.likedAnimals" placeholder="please select">
      <md-option ng-repeat="a in ctrl.animals" value="a">a</md-option>
    </md-select>
  </md-input-container>
</div>

JS

(function () 
  'use strict';
  angular
      .module('MyApp')
      .controller('AppCtrl', function($scope) 
        this.likedAnimals = ["mouse", "dog"];
        this.animals = ["mouse", "dog", "cat", "bird"];
  );
)();

代码基于 Stack Overflow 答案：How am I supposed to implement multiple select option in angular-material?

【讨论】：

这行得通，但是如何将选定的项目堆叠在一起，而不是像示例中那样内联并删除逗号？

是否可以在选择选项中添加图片？

是否可以在组合框中添加全选？？

【参考方案3】：

查看chips

您也可以应用自己的自定义模板。

【讨论】：

任何正在寻找带有添加选项的多选的人，这就是答案！

【参考方案4】：

您可以查看指令here 的文档。

属性

multiple (optional): boolean - 是否是多个。

<md-select ng-model="someModel" placeholder="Select a state" multiple="true">
    <md-option ng-value="opt" ng-repeat="opt in neighborhoods2"> opt </md-option>
</md-select>

如果这不起作用，我听说md-multiple 可能会起作用，但文档尚未更新。不过，我还无法验证这一点。

【讨论】：

这行不通:-(

我相信多项选择已被禁用。我认为他们希望人们使用 Chips 进行多项选择。这里的故事仍在发展中。

我希望不会，芯片太丑了，不适合带有其他选择控件的表单的正常外观。