python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions