Я проверил документы и демонстрации, но, увы! Я не нашел ссылки на реализацию опции множественного выбора, например, выбрать 2, используя angular -материал. Может ли кто-нибудь рассказать мне, как заставить его работать?
Как я могу реализовать несколько опций выбора в angular -материале?
Ответ 1
Splaktar ответ правильный: просто добавьте несколько к вашему 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"];
});
})();
Код на основе ответа Qaru: Как я должен реализовать опцию множественного выбора в angular-материале?
Ответ 2
Вы можете посмотреть документы для директивы здесь.
Свойства
multiple (необязательно): 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
может работать, но документы еще не обновлены. Я еще не смог проверить это.
Ответ 3
Проверьте фишки
Вы также можете применить свой собственный шаблон.
Ответ 4
Я использовал следующее, чтобы разрешить мне использовать ng-repeat вместе с некоторыми md-select, которые были multi, а некоторые из них не были (из 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>
Ответ 5
Я пишу адаптивные чипы AngualrJS в CodePen.
Оформить заказ here