Angularjs Dynamic Dropdown Menu using json

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.

<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js</a>

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.

<div>
    
        Select a prodcuts Type...
    
    
        Select a prodcuts...
        
</div>

Include Scripts

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'}
	];
});

JSON File(Fetch Database)

    $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'}
	];

Example

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.