How to selecting multiple options in AngularJs?

The multiple options use to select the multiple items from the dropdown. This is similar to the option binding but only difference is add the selection attribute multiple is true i.e.

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

The multiple items selection in the dropdown example as given below

The AngularJs code sample

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

The JSON for Users collection

[{

        "Id": 1,
        "Name": "Anil Singh",
        "cities": ["New Delhi", "Delhi 96"]
    }, {
        "Id": 2,
        "Name": "Sunil",
        "cities": ["Lumbini", "Lumbini"]

    }, {
        "Id": 3,
        "Name": "Reena",
        "cities": ["London", "Manchester"]
    }, {
        "Id": 4,
        "Name": "Sushil",
        "cities": ["Lumbini", "Lumbini"]

    }, {
        "Id": 5,
        "Name": "Aradhya",
        "cities": ["London", "Manchester"]
    }]

The HTML code sample

<div ng-app="optionApp">
    <div ng-controller="optionCtrl">
        <h1>Selecting Multiple Options</h1>
        <div>User List to select multiple user</div>
        <select ng-model="user" multiple="true" ng-options="user.Name for user in users"></select>
    </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 Options</h1>
        <div>User List to select multiple user</div>
        <select ng-model="user" multiple="true" ng-options="user.Name for user in users"></select>
    </div>
</body>
</html>

The output

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book