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.
The multiple items selection in the dropdown example as given below
The AngularJs code sample
The JSON for Users collection
The HTML code sample
The Full live demo code with Angular and HTML as given below
The output
<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
|
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...
|
0 comments:
Post a Comment