Select
create a dropdown list (select box) based on items in an array, or an object
Using ng-options
the ng-option directive to create a dropdown list, based on an object or an array in AngularJS.
- simple Drodown list
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in courses">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.courses = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];
});
</script>
</body>
</html>
Also use the ng-repeat directive to make the same dropdown list as ng-options.
- same code in ng-repeat
<html>
<script src="angular.min.js"></script>
<body>
<p>The same example of dropdown list using the ng-repeat directive.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in courses">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.courses = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];
});
</script>
</body>
</html>
3)Employees data in ng-option -Binding
<html>
<head>
<title>AngularJS ng-options Example - Bind </title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp"
ng-controller="myController">
<select ng-model="employee"
ng-options="emp.values.name for emp in empArray"
ng-change="showDetails()"
id="emps">
<option value="">-- Select --</option>
</select>
<!--SHOW OTHER DETAILS.-->
<p style="white-space:pre-wrap;">{{details}}</p>
</div>
</body>
<script>
angular.module("myApp", [])
.controller('myController', function ($scope, $filter) {
// CREATE AN 'employees' OBJECT, WITH AN ARRAY OF DATA.
$scope.employees = {
"05/17/2015": { 'name': 'prasad', 'age': 37 },
"03/25/2016": { 'name': 'kiran', 'age': 27 },
"09/11/2015": { 'name': 'nani', 'age': 29 },
"01/07/2016": { 'name': 'geetha', 'age': 19 },
"03/09/2014": { 'name': 'latha', 'age': 40 }
}
$scope.empArray = Object.keys($scope.employees)
.map(function (value, index) {
return { joinDate: new Date(value), values: $scope.employees[value] }
}
);
// SHOW EMPLOYEE DETAILS.
$scope.showDetails = function () {
$scope.details =
'Name: ' + $scope.employee.values.name + '\n' +
'Age: ' + $scope.employee.values.age + '\n' +
'Date of Joining: ' + $filter('date')($scope.employee.joinDate, 'dd/MM/yyyy');
};
});
</script></html>
ng-options vs. ng-repeat
Although, both can be used for dropdown list, but ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, while the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:
Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.
Limitation of ng-repeat
4)The ng-repeat directive has a limitation that the selected value must be a string:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a course:</p>
<select ng-model="selectedCourse">
<option ng-repeat="x in course" value="{{x.model}}">{{x.model}}</option>
</select>
<h2>You selected Course: {{selectedCourse}}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.course = [
{model : "Ms-0ffice", color : "Basics"},
{model : "Html", color : "Scripting"},
{model : "Java", color : "Language"},
{model : "Tally", color : "Package"}
];
});
</script>
</body>
</html>
5) While using the ng-options directive, you can select an object value:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a course:</p>
<select ng-model="selectedCourse" ng-options="x.model for x in course">
</select>
<h2><u>You selected:</u> {{selectedCourse.model}}</h2>
<p>It's Type is: {{selectedCourse.type}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.course = [
{model : "Ms-Office", type : "Basics"},
{model : "Html", type : "Scripting"},
{model : "Java", type : "Language"},
{model : "Tally", type : "Package"}
];
});
</script>
</body>
</html>
data source as an object:
6)The expression in the ng-options attribute is a bit different for objects:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a name:</p>
<select ng-model="selectedName" ng-options="x for (x, y) in names">
</select><br>
<h2>You selected: {{selectedName}}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = {
Prasad : "Vuyyuru",
Saradhi : "Bangulur",
Ramesh : "Vijayawada",
Latha : "Quwait",
}
});
</script>
</body>
</html>
7)The selected value will always be the value in a key-value pair.
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a Name:</p>
<select ng-model="selectedName" ng-options="x for (x, y) in names">
</select>
<h2>You selected Name: {{selectedName.name}}</h2>
<h2>Area: {{selectedName.area}}</h2>
<h3>Contact_no: {{selectedName.Contactno}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = {
Person1 : {name : "Prasad", area : "Vuyyuru", Contactno : "9885348743"},
person2 : {name : "Saradhi", area : "Bangulur", Contactno : "9467523895"},
person3 : {name : "Kiran", area : "Hydrabad", Contactno : "9988776644"},
person4 : {name : "Sivasri", area : "Quwait", Contactno : "9756934653"}
}
});
</script>
</body>
</html>
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743