Blog

  • 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.

    Thanx

     

Tags: AngularJS