What is ng-options? How to achieve its binding?

The ng-options is used to achieve to dropdown functionality in angular like others languages.

In the below example, I am going to explain to use of ng-options and it’s binding with empty options i.e.

<select ng-model="countries" ng-options="loc.Name for loc in locations">
    <option value="">Select country</option>
</select>

The Table of contents to achieves to this functionality as given below.

·         HTML Code-Sample
·         AngularJs Code-Sample
·         Counties JSON
·         Full and Live demo (HTML + Angular) Code-Sample


In the below example, you can see the binding the counties drop-down with countries collection and after selected country, populate the city drop-down with selected country i.e.

The HTML code-sample
<div ng-app="selectionApp">
    <div ng-controller="SelectionController">
        <h1>Select box with options</h1>
        <div>
            <div>Country List</div>
            <select ng-model="countries" ng-options="loc.Name for loc in locations">
                <option value="">Select country</option>
            </select>
            <div>City List</div>
            <select ng-model='city' ng-options='c for c in countries.cities'>
                <option value="">Select city</option>
            </select>
        </div>
    </div>
</div>

The AngularJs code-sample
        var app = angular.module('selectionApp', []);
        app.controller('SelectionController', function ($scope, $http, $log) {
            $http.get('JSONdata.json')
              .success(function (data) {
                  $scope.locations = data;
                  //$log.log(data);//Go to console log and see the log output.
              });
        });

The Counties JSON
[{

        "Id": 1,
        "Name": "India",
        "cities": ["New Delhi", "Delhi 96"]
    }, {
        "Id": 2,
        "Name": "Nepal",
        "cities": ["Lumbini", "Lumbini"]

    }, {
        "Id": 3,
        "Name": "United Kingdom",
        "cities": ["London", "Manchester"]
    }]

The Full Live demo (HTML + Angular) code-sample
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
    <script>
        var app = angular.module('selectionApp', []);
        app.controller('SelectionController', function ($scope, $http, $log) {
            $http.get('JSONdata.json')
              .success(function (data) {
                  $scope.locations = data;
                  //$log.log(data);//Go to console log and see the log output.
              });
        });
    </script>
</head>
<body ng-app="selectionApp">
    <div ng-controller="SelectionController">
        <h1>Select box with options</h1>
        <div>
            <div>Country List</div>
            <select ng-model="countries" ng-options="loc.Name for loc in locations">
                <option value="">Select country</option>
            </select>
            <div>City List</div>
            <select ng-model='city' ng-options='c for c in countries.cities'>
                <option value="">Select city</option>
            </select>
        </div>
    </div>
</body>
</html>

The output:

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book