Hello everyone, I am going to share the code
sample for bind drop down list or options binding using the AngularJs. The live demo example code as given below.
The HTML code sample
<div ng-app="dropdown" ng-controller="dropdownController">
Please
Select Dropdown
<select data-ng-model="employee.details" data-ng-options="e.name +' [' + e.type + ']' for e in employees"></select>
</div>
The AngularJs code sample
var app = angular.module('dropdown', []);
app.controller('dropdownController', function ($scope) {
$scope.employee = {
name: "Anil",
details: {
id: 3,
type: "HR",
name: "BuckChodi"
}
};
$scope.employees = [{
id: 1,
type: "HR",
name: "Time Pass"
}, {
id: 2,
type: "IT",
name: "lazy"
}, {
id: 3,
type: "DEV",
name: "Work Hard"
}, {
id: 4,
type: "MGMT",
name: "Injoye with HR"
}];
});
The Full live code sample
<html ng-app="dropdown">
<head>
<meta charset="utf-8" />
<script src="http://code.angularjs.org/1.2.14/angular.js" ></script>
<script>
var app = angular.module('dropdown', []);
app.controller('dropdownController', function ($scope) {
$scope.employee = {
name: "Anil",
details: {
id: 3,
type: "HR",
name: "BuckChodi"
}
};
$scope.employees = [{
id: 1,
type: "HR",
name: "Time Pass"
}, {
id: 2,
type: "IT",
name: "lazy"
}, {
id: 3,
type: "DEV",
name: "Work Hard"
}, {
id: 4,
type: "MGMT",
name: "Injoye with HR"
}];
});
</script>
</head>
<body ng-controller="dropdownController">
Please Select
Dropdown
<select data-ng-model="employee.details" data-ng-options="e.name +' [' + e.type + ']' for e in employees"></select>
</body>
</html>
The output : go to below link