Angularjs Dynamic Dropdown Menu using json
In this Post We Will Explain About is Angularjs Dynamic Dropdown Menu using json With Example and Demo.
Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Bind json data to dynamic dropdownMenu using Angular
In this post we will show you Best way to implement how to implement dynamic dropdown menu with angular js, hear for How to populate dropdown from database using angularjs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Include External Scripts
First of all the simple include angularjs main external libs add in the html header parts.
[php]
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
[/php]
Include HTML Markup
Simple created ew app and simple controller Like as a “liveApp” is a one type of the web-app’s module and secod thing controller Like as a ‘liveCtrl’ is the controller.
[php]
Select a prodcuts Type…
Select a prodcuts…
[/php]
Include Scripts
[php]
angular.module(“liveApp”,[])
.controller(“liveCtrl”,function($scope){
$scope.Products = [{ ItemName: ‘Tiger’, ItemNumber: ’01’ }, { ItemName: ‘Dog’, ItemNumber: ’02’ }, { ItemName: ‘Cat’, ItemNumber: ’03’ }, { ItemName: ‘Camel’, ItemNumber: ’04’ }];
$scope.employers = [{ empname: ‘Potato’, empnumber: ’01’ }, { empname: ‘Tomato’, empnumber: ’02’ }];
$scope.ProductsType = [
{ type: ‘Products’, data:$scope.Products, displayName:’ItemName’ },
{ type: ’employers’, data:$scope.employers, displayName:’empname’}
];
});
[/php]
JSON File(Fetch Database)
[php]
$scope.Products = [{ ItemName: ‘Tiger’, ItemNumber: ’01’ }, { ItemName: ‘Dog’, ItemNumber: ’02’ }, { ItemName: ‘Cat’, ItemNumber: ’03’ }, { ItemName: ‘Camel’, ItemNumber: ’04’ }];
$scope.employers = [{ empname: ‘Potato’, empnumber: ’01’ }, { empname: ‘Tomato’, empnumber: ’02’ }];
$scope.ProductsType = [
{ type: ‘Products’, data:$scope.Products, displayName:’ItemName’ },
{ type: ’employers’, data:$scope.employers, displayName:’empname’}
];
[/php]
I hope you have Got dynamic dropdown in angularjs example And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.
