Variations for dropdown in AngularJS

Posted By Abhinav Anand | 23-Dec-2014

There are so many ways to create a drop down box for selection in angularjs,but we have to google or search here and there for the exact solution for variations at drop-down.

I also faced such a problem,so i tried to get the things at one place so that you can easily find solution for your need.

1>Simple way to generate a drop-down is by using ng-repeat.




In your Angularjs controller

$scope.items = ['chairs','fruits','balls','cars']

This code is useful when the array items only contains string data.But, this way can't be used when array contains objects.

2>If we have use ng-options as.

A>select as label for value in array.

$scope.items = [{name: 'car', quantity: 10 },{ name: 'fruits', quantity: 20 },{ name: 'gifts', quantity: 40 }];

Initially the first option inside the dropdown box is a blank. This is because, initially, the ‘selectedItem’ does not have any default value and is undefined. Hence no default option pre-selected, AngularJS will generates a new option tag and select it as default. In oreder to fix the problem, just set the ‘selectedItem’ to the first object in the array.

$scope.selectedItem = $scope.items[0]

B> label group by group for value in array

$scope.items = [{name: 'car', quantity: 10 },{ name: 'fruits', quantity: 20 },{ name: 'gifts', quantity: 40 },{name: 'bat', quantity: 10 },
                  {name: 'flowers', quantity: 10 },{name: 'books', quantity: 10 }];

Then select syntax will be

B>select as label group by group for value in array track by trackexpr

For object data

A>If we have items as object,We can use

label for (key , value) in object

$scope.items = {'fruits': 50,'car': 77,'flowers': 40,'balls': 85,'bats': 27,'gifts': 30 };

Select syntax will be

Hope this will be very useful for you.



Request for Proposal

Recaptcha is required.

Sending message..