Multi Select Drop Down List with Bootstrap & Angularjs

AngularJs Multi Select Dropdown Options

AngularJs Multi select Dropdown options : we will use ng-model to make multi select dropdown. Here during this tutorial we are reaching to make a case for however you’ll be able to produce straightforward multi choose dropdown exploitation the Angular js ng-model. we are going to make a case for this with example and demo.

In this post we will show you how to create AngularJs Multi Select Dropdown Options and how to use it wilt example and demo. hear in given following code we will show you how to use ng-model for multi select dropdown and get value of multi select dropdown.

AngularJs Multi Select Dropdown Options Example

hear we have html and JavaScript part separately for multi select dropdown.

Here following is Html Part for creating for multi select dropdown using angularjs and get data of multi select dropdown.

AngularJs Multi Select Dropdown Options Example:

<div ng-app="dropdownApp">  
	<div ng-controller="dropdownController">  
		<label>Multi Select Items:</label><br>
		<select multiple ng-model="multiSelectedItems">
			<option value="21">Option Item 21</option>
			<option value="22">Option Item 22</option>
			<option value="23">Option Item 23</option>
			<option value="24">Option Item 24</option>
		</select>
		<p>
			<tt> multiSelectedItems = {{multiSelectedItems}}</tt>
		</p>
	</div>  
</div>

JavaScript Part for Now Let us create javascript controller part.

AngularJs Multi Select Dropdown Options Example:

<script>
	var dropdownApp = angular.module("dropdownApp", []);
    dropdownApp.controller("dropdownController", function($scope) {
    $scope.selected = [
        {id:1, name:"Item 21"}
    ];
    
    $scope.multiSelectedItems = [];
    
    $scope.$watch('selected', function(nowSelectedvalue){
        $scope.multiSelectedItems = [];
        
        if( ! nowSelectedvalue ){
		    // if not selected then return
            return;
        }
        angular.forEach(nowSelectedvalue, function(vals){
            $scope.multiSelectedItems.push( vals.id.toString() );
        });
    });
 
});
</script>

In this example we’ve created a ng-model multiSelectedItems to perform the muli choose action. we’ve allotted the Item21 as default chosen. $scope.selected is employed to line the deault chosen things. If we run the offer on top of example it’ll manufacture show output one thing like this.