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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.