10 Example(s) of Ng-Options


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.


Ng-Options Example - 1
<!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>

Output

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.


Ng-Options Example - 2
<!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>

Output

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.


Ng-Options Example - 3
<!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>

Output

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.


Ng-Options Example - 4
<!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>

Output

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.


Ng-Options Example - 5
<!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>

Output

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.


Ng-Options Example - 6
<!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>

Output

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.


Ng-Options Example - 7
<!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>

Output

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.


Ng-Options Example - 8
<!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>

Output

Description :

Ng-options create list of options using array of objects staffMembers.It will show firstName and lastName if ng-show value is true.


Ng-Options Example - 9
<!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>

Output

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.


Ng-Options Example - 10
<!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>

Output