This
is a simple way to creating drop-down in AngularJs, In AngularJs, we are
using the selection box to achieve to drop-down functionality and bind the
option with binding data.
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.
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 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 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
|
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...
|
0 comments:
Post a Comment