我应该如何在 angular-material 中实现多个 select 选项?
How am I supposed to implement multiple select option in angular-material?
我已经检查了文档和演示,但是唉!!我还没有找到任何关于使用 angular-material 实现 select 2 等多个 select 选项的参考资料。
谁能告诉我如何让它工作?
您可以查看指令 here 的文档。
属性
multiple(可选):boolean - 是否为 multiple。
<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
您也可以应用自己的自定义模板。
Splaktar 的答案是正确的:只需将 multiple 添加到您的 md-select。
工作解决方案代码笔: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 答案的代码:
我使用以下方法允许我使用 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>
我已经检查了文档和演示,但是唉!!我还没有找到任何关于使用 angular-material 实现 select 2 等多个 select 选项的参考资料。 谁能告诉我如何让它工作?
您可以查看指令 here 的文档。
属性
multiple(可选):boolean - 是否为 multiple。
<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
您也可以应用自己的自定义模板。
Splaktar 的答案是正确的:只需将 multiple 添加到您的 md-select。
工作解决方案代码笔: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 答案的代码:
我使用以下方法允许我使用 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>