Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How am I supposed to implement multiple select option in angular-material?

Tags:

I have checked the docs and the demos, but alas!! I have not found any reference of implementing the multiple select option like select 2 using angular-material. Could anyone please tell me how to make it work?

like image 750
John Maclein Avatar asked Feb 22 '15 08:02

John Maclein


People also ask

How do you limit angular materials multiple select items to n items?

In your component create a global variable named mySelections . This will store your selections :) It will hold an array of strings. Change the number 3 to N and presto, you're done.

How do you set mat selected value?

Create Select using <mat-select> Angular Material Select is created using <mat-select> which is a form control for selecting a value from a set of options. To add elements to select option, we need to use <mat-option> element. To bind value with <mat-option> , we need to use value property of it.

What is multi select dropdown?

Multi select dropdown list is used when a user wants to store multiple values for the same record, whereas dropdown list is used to store a single value for a record. You can create custom categories of either dropdown list or multi select dropdown list and define items in each category.


1 Answers

Splaktar's answer is correct: Just add multiple to your md-select.

Codepen for working solution: 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"];   }); })(); 

Code based on Stack Overflow answer: How am I supposed to implement multiple select option in angular-material?

like image 177
Ansgar Avatar answered Sep 18 '22 03:09

Ansgar