Description :
In this example ng-options directive generate list of students using array of object "students".The selected student will show in pre element because selected student name bound to the name variable with ng-model directive.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init="students=[{name:'Herry'},{name:'John'},{name:'Peter'}]">
Students: <select ng-model="name" ng-options="student.name as student.name for student in students"></select>
<pre>Student: {{name}}</pre>
</div>
</body>
</html>
Description :
In this example ng-options directive generate list of students using array of object "students".The selected student id will show in pre element because selected student id bound to the StudentId variable with ng-model directive.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Example">
<div ng-controller="ExampleController" ng-init="StudentId=1">
Students: <select ng-model="StudentId" ng-options="student.id as student.name for student in students"></select>
<pre>studentId: {{StudentId}}</pre>
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.students = [{ name: 'Herry', id: 1 }, { name: 'John', id: 2 }, { name: 'Peter', id: 3 }];
}]);
</script>
</body>
</html>
Description :
ng-options directive generate list of student names using array of object "students".The selected student will show object of that student because selected student object bound to the Studentvariable with ng-model directive.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Example">
<div ng-controller="ExampleController" ng-init="StudentId=1">
Students: <select ng-model="Student" ng-options="student as student.name for student in students"></select>
<pre>studentObj: {{Student}}</pre>
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.students = [{ name: 'Herry', id: 1, Address: 'St.Xavier Street' }, { name: 'John', id: 2, Address: 'St.Xavier Street 2' }, { name: 'Peter', id: 3, Address: 'St.Xavier Street 3' }];
}]);
</script>
</body>
</html>
Description :
ng-options directive generate list of students using array of object "students".The selected student will show in textbox because selected student name bound to the Student variable with ng-model directive.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Example">
<div ng-controller="ExampleController" ng-init="StudentId=1">
Students: <select ng-model="Student" ng-options="student.name as student.name for student in students"></select><br />
Selected Student: <input type="text" ng-model="Student" />
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.students = [{ name: 'Herry', id: 1, Address: 'St.Xavier Street' }, { name: 'John', id: 2, Address: 'St.Xavier Street 2' }, { name: 'Peter', id: 3, Address: 'St.Xavier Street 3' }];
}]);
</script>
</body>
</html>
Description :
ng-options generate list of names using array of object "HideShow".Selected option will hide or show the checkbox based on the value of variable isHide with ng-model directive.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Example">
<div ng-controller="ExampleController" ng-init="StudentId=1">
Hide/Show: <select ng-model="isHide" ng-options="IsShow.isHide as IsShow.name for IsShow in HideShow"></select><br />
<span ng-hide="isHide"> Hide Me <input type="checkbox" ng-model="isHide" /></span>
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.HideShow = [{ name: 'Hide', isHide: true, }, { name: 'Show', isHide: false }];
}]);
</script>
</body>
</html>
Description :
In this example, we have an array named staffMembers with first name,last name and designation. In the first dropdown we bind the first name and last name with the ng-options directive. In the second dropdown we bind the first name and last name with the ng-options directive and group by designation.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="Example">
<div ng-controller="ExampleController" ng-init="StudentId=1">
<div class="container">
Staff: <select ng-model="StaffMember" class="form-control" ng-options=" p.firstName+','+p.lastName for p in staffMembers"></select><br />
Staff Group by: <select ng-model="StaffMember" class="form-control" ng-options=" p.firstName+','+p.lastName group by p.designation for p in staffMembers"></select><br />
<pre>{{StaffMember}}</pre>
</div>
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.staffMembers = [{ firstName: 'Archie', lastName: 'Smith', designation: 'Developer' }, { firstName: 'Arran', lastName: 'Taylor', designation: 'Developer' }, { firstName: 'Alastair', lastName: 'Cook', designation: 'Designer' }];
}]);
</script>
</body>
</html>
Description :
In this example firstly we can add the color by calling addColor() option.ng-options create options of added colors.Div element will show if we select the added the color.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="Example">
<div ng-controller="ExampleController">
<div class="container">
<b>Add Color</b> <input type="color" ng-model="colorName" class="form-control" /><br />
<input type="button" ng-disabled="colorName==null || colorName==''" ng-click="addColor(colorName)" class="btn btn-primary" value="Add Color" /><br /><br />
<span ng-show="ColorArrs.length>0"><b>Choose Color</b><select ng-model="selectedColor" class="form-control" ng-options="ColorArr for ColorArr in ColorArrs"></select><br /></span>
<div style="width:200px;height:200px;background-color:{{selectedColor}}"></div>
</div>
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.ColorArrs = [];
$scope.addColor = function (colorName) {
$scope.ColorArrs.push(colorName);
$scope.colorName = null;
}
}]);
</script>
</body>
</html>
Description :
Ng-options create list of options using array of object "arrs" and selected option will display object because it is bind to names variable with ng-model directive.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Example">
<div ng-controller="ExampleController">
<select ng-model="names" ng-options="arr.name for arr in arrs">
<option value=''>--Select item--</option>
</select>
<pre>{{names | json}}</pre>
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.arrs = [{ name: 'Miller' }, { name: 'Clark' }];
}]);
</script>
</body>
</html>
Description :
Ng-options create list of options using array of objects staffMembers.It will show firstName and lastName if ng-show value is true.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Example">
<div ng-controller="ExampleController">
<select ng-model="staffMember">
<option value=''>--Select Name--</option>
<option ng-repeat="p in staffMembers">{{p.firstName}}, {{p.lastName}}</option>
</select>
<pre ng-show="staffMember!='' && staffMember!=null" >Name: {{staffMember}}</pre>
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.staffMembers = [{ firstName: 'Archie', lastName: 'Smith' }, { firstName: 'Arran', lastName: 'Taylor' }, { firstName: 'Alastair', lastName: 'Cook' }];
}]);
</script>
</body>
</html>
Description :
In this example we have two dropdown first bind with countries and second bind with states using ng-options directive. Second dropdown shows the states of the country selected in first dropdown.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Example">
<div ng-controller="ExampleController" ng-init="Country='India'">
Country <select ng-model="Country" ng-options="p.Name as p.Name for p in Countries"></select><br /><br />
State <select>
<option ng-model="state" ng-repeat="p in States| filter:Country">{{p.Name}}</option>
</select>
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.Countries = [{ Name: 'Canada' }, { Name: 'India' }];
$scope.States = [{ Name: 'Arunachal Pradesh', country: 'India' }, { Name: 'Punjab', country: 'India' }, { Name: 'Rajasthan', country: 'India' }, { Name: 'Quebec', country: 'Canada' }, { Name: 'Manitoba', country: 'Canada' }];
}]);
</script>
</body>
</html>