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.
Go to live demo link http://embed.plnkr.co/iFNpGF/preview
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 : go to http://embed.plnkr.co/4tb3oN/preview
The output image as given below.
Thank you!
|
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..
|
