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:
Blogger Comment
Facebook Comment