In AngularJS, You Will Find Few Ways To Create Drop-downs. Lets Start From The Beginning. Lets See How Simple Drop-down Going To Be.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<span>Customer Name</span>
<select>
<option value="1">Nifal</option>
<option value="2">Dinesh</option>
<option value="3">Asjad</option>
<option value="4">Hudhaifa</option>
<option value="5">Gowtham</option>
</select>
</div>
</body>
</html>
|
If You See The following Code In The Browser You Will Get A Simple Drop Down. Lets Use AngularJS To Create The Drop-down. In This Example I'm Going To Show You, Two Different Ways To Do This. First Is By Using "ng-repeat". Lets Start Doing It. In Order To Get The Names I Will Be Using A "ng-controller".
1
2
3
4
5
6
7
8
9
10
| var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
$scope.Customers = [
{ Id: 1, Name: "Nifal" },
{ Id: 2, Name: "Dinesh" },
{ Id: 3, Name: "Asjad" },
{ Id: 4, Name: "Hudhaifa" },
{ Id: 5, Name: "Gowtham" }
];
});
|
Now Lets Use This Controller And Create Drop-down. In Order To Build The Drop-down I'm Looping Through The "Customers" Array In The "<option>" Tag. In Order To Bind The Value & Text To The "<option>" Tag I'm Using AngularJS Expression.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="CustomerController">
<span>Customer Name</span>
<select>
<option ng-repeat="Customer in Customers" value="{{Customer.Id}}">
{{Customer.Name}}
</option >
</select>
</div>
<script type="text/javascript" >
var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
$scope.Customers = [
{ Id: 1, Name: "Nifal" },
{ Id: 2, Name: "Dinesh" },
{ Id: 3, Name: "Asjad" },
{ Id: 4, Name: "Hudhaifa" },
{ Id: 5, Name: "Gowtham" }
];
});
</script>
</body>
</html>
|
If You Run The Above Code You Will Get The Drop-down. Now Lets See How We Can Improve Our Drop-down Using AngularJS "ng-options". In This Method We Won't Use "ng-repeat". In The "<select>" Tag It Self We Should Use "ng-options" To Load The Drop-down.
1
| <select ng-options="Customer.Id as Customer.Name for Customer in Customers"></select>
|
If You Run The Above Code You Won't Get The Drop-down. But If You Inspect Element, You Will See Your "<select>" Tag. But You Won't Get Options In It. Even After Using "ng-options", You Have To Specify The "ng-model".
1
| <select ng-options="Customer.Id as Customer.Name for Customer in Customers" ng-model="MyCustomer"></select>
|
Lets See The Full Code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="CustomerController">
<span>Customer Name</span>
<select ng-options="Customer.Id as Customer.Name for Customer in Customers" ng-model="MyCustomer"></select>
</div>
<script type="text/javascript" >
var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
$scope.Customers = [
{ Id: 1, Name: "Nifal" },
{ Id: 2, Name: "Dinesh" },
{ Id: 3, Name: "Asjad" },
{ Id: 4, Name: "Hudhaifa" },
{ Id: 5, Name: "Gowtham" }
];
});
</script>
</body>
</html>
|
If You Run The Above Code You Will Get The Drop-down. But With A Blank Option Like Below.
This Is Happening Because, "ng-options" Will Check For The "ng-model"s Value. But Its Empty. You Can Overcome By Giving A Value To Your Model In The Controller.
1
2
3
4
5
6
7
8
9
10
11
| var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
$scope.Customers = [
{ Id: 1, Name: "Nifal" },
{ Id: 2, Name: "Dinesh" },
{ Id: 3, Name: "Asjad" },
{ Id: 4, Name: "Hudhaifa" },
{ Id: 5, Name: "Gowtham" }
];
$scope.MyCustomer = 3;
});
|
Hope You Enjoyed The Article.
