Tutorialsplane

AngularJs Multi Select Dropdown Options


AngularJs Multi Select Dropdown Options : We can use ng-model to create multi select dropdown. Here in this tutorial we are going to explain how you can create simple multi select dropdown using the Angular js ng-model. We will explain this with example and demo.


AngularJs Multi Select Dropdown Options Example

Let us have html and JavaScript part separately –

Html Part –

Here is Html Part for creating multi select dropdown in angularjs.

AngularJs Multi Select Dropdown Options Example:

<div ng-app="myApp">  
<div ng-controller="myController">  
 <br/>
    
	<p>
    <tt> selectedItems = {{selectedItems}}</tt>
	</p>
</div>  
</div> 

JavaScript Part –

Now Let us create javascript controller part.

AngularJs Multi Select Dropdown Options Example:

 

Try it »

In this example we have created a ng-model selectedItems to perform the muli select action. We have assigned the Item1 as default selected. $scope.selected is used to set the deault selected items. If you run the above example it will produce output something like this –