angularjs multiple selection dropdown ng options

AngularJs multiple selection dropdown ng-options

How to selecting multiple items in angularjs ng-options?

The multiple selection ng-options use to select the multiple items from the multi  select drop-down.

The multiple selection options binding is very similar to the option binding but only one difference,  the difference is  must need to add an attribute multiple is true. i.e.

<select ng-model="user.name" multiple="true" ng-options="user.name for user in users"></select>


The Table of context for select multiple items from multiple selection drop-down as given below.

            1. The HTML code for added selection attribute multiple is true.
            2. The JSON for Users collection.
            3.  The Angular code for write an angular controller use to users JSON collection and set the user scope.
           4. The Live demo code with combination of all above HTML, Angular and JSON.

The HTML code for added selection attribute multiple

<select ng-model="user.name" multiple="true" ng-options="user.name for user in users"></select>

The AngularJs code sample

var app = angular.module('optionApp', []);
app.controller('optionCtrl', function ($scope, $http) {
   $http.get('user.json')
         .success(function (data) {
             $scope.users = data;
          });
  });

The User JSON for collection

    [{
        "Id": 1,
        "name": "Anil Singh"
    }, {
        "Id": 2,
        "name": "Sunil"
    }, {
        "Id": 3,
        "name": "Reena"
    }, {
        "Id": 4,
        "name": "Sushil"
    }, {
        "Id": 5,
        "name": "Aradhya"
    }]

The HTML code sample as given below

<div ng-app="optionApp">
    <div ng-controller="optionCtrl">
        <h1>selecting multiple  users using ng-options in angularjs</h1>
        <div>Select multiple users</div>
        <select ng-model="user.name" multiple="true" ng-options="user.name for user in users"></select>
     <div>Selected Items : {{user.name}}</div
    </div>
</div>

The Full live demo code with Angular and HTML as given below

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
    <script>
        var app = angular.module('optionApp', []);
        app.controller('optionCtrl', function ($scope, $http) {
            $http.get('userJSON.json')
                 .success(function (data) {
                     $scope.users = data;
                 });
        });
    </script>
</head>
<body ng-app="optionApp">
    <div ng-controller="optionCtrl">
        <h1> selecting multiple  users using ng-options in angularjs</h1>
        <div> Select multiple users</div>
        <select ng-model="user.name" multiple="true" ng-options="user.name for user in users"></select>
     <div>Selected Items : {{user.name}}</div>
    </div>
</body>
</html>


The output image as given below.













Thank you!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book