drop down list in angularjs

DropDownList in AngularJs

Hello everyone, I am going to share the code sample for bind drop down list or options binding using the AngularJs. The live demo example code as given below.

The HTML code sample

<div ng-app="dropdown"  ng-controller="dropdownController">
     Please Select Dropdown 
    <select data-ng-model="employee.details" data-ng-options="e.name +' [' + e.type + ']' for e in employees"></select>
</div>

The AngularJs code sample

  var app = angular.module('dropdown', []);
        app.controller('dropdownController', function ($scope) {
            $scope.employee = {
                name: "Anil",
                details: {
                    id: 3,
                    type: "HR",
                    name: "BuckChodi"
                }
            };

            $scope.employees = [{
                id: 1,
                type: "HR",
                name: "Time Pass"
            }, {
                id: 2,
                type: "IT",
                name: "lazy"
            }, {
                id: 3,
                type: "DEV",
                name: "Work Hard"
            }, {
                id: 4,
                type: "MGMT",
                name: "Injoye with HR"
            }];
        });

The Full live code sample

<!DOCTYPE html>
<html ng-app="dropdown">
<head>
    <meta charset="utf-8" />
    <title>AngularJs Droplown List</title>
    <script  src="http://code.angularjs.org/1.2.14/angular.js" ></script>
    <script>
       var app = angular.module('dropdown', []);
        app.controller('dropdownController', function ($scope) {
            $scope.employee = {
                name: "Anil",
                details: {
                    id: 3,
                    type: "HR",
                    name: "BuckChodi"
                }
            };

            $scope.employees = [{
                id: 1,
                type: "HR",
                name: "Time Pass"
            }, {
                id: 2,
                type: "IT",
                name: "lazy"
            }, {
                id: 3,
                type: "DEV",
                name: "Work Hard"
            }, {
                id: 4,
                type: "MGMT",
                name: "Injoye with HR"
            }];
        });
    </script>
</head>

<body ng-controller="dropdownController">
    Please Select Dropdown 
    <select data-ng-model="employee.details" data-ng-options="e.name +' [' + e.type + ']' for e in employees"></select>
</body>
</html>


The output : go to below link


ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book