CODEWITHSUNDEEP
htmlangularjs
Chethana C
Chethana C

Reputation: 47

How to use alphabetical order in ng-options using Angularjs?

I'm working on Angularjs and I need to set my drop down list in alphabetical order.

Here is the ng-option: 

 <div class="form-group">
  <label>Branch : <i class="mandate">*</i></label>
  <select class="form-control input-md" ng-model="query.branch" ng-options="showName(branch.branchName) as   showName(branch.branchName) for branch in baseBranches | orderBy:'toString()'" name="branchName">
    <option value="" selected>Select Branch</option>
  </select>
  <span class="error" ng-show="search_form.branchName.$error.required">Branch is required</span>
</div>

I'm new to Angularjs.

Upvotes: 1

Views: 4662

Answers (3)

Nitheesh
Nitheesh

Reputation: 19986

You can use Order by filter in angular js.

<select class="form-control input-md" 
        ng-model="query.branch" 
        ng-options="showName(branch.branchName) as   showName(branch.branchName) for branch in baseBranches | orderBy:'branchName'" name="branchName">
    <option value="" selected>Select Branch</option>
</select>

If you are sure that your option format is something like this [number][space][word] or you need to sort depend up on the word after space, you can write a custom filter for that. I have attached a sample code snippet with a custom filter here with. 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <select ng-model="selectedName" ng-options="item.Name for item in names | customSorter:'Name'">
        </select>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.names = [{
                    "Id": 0,
                    "Name": "10095 Gil"
            }, {
                    "Id": 1,
                    "Name": "00085 Tobias"
            },
                {
                    "Id": 2,
                    "Name": "145 Linus"
            }];
        });
        app.filter('customSorter', function () {
            return function (items, field) {
                var filtered = [];
                angular.forEach(items, function (item) {
                    filtered.push(item);
                });
                filtered.sort(function (a, b) {
                    return (a.Name.split(' ')[1] > b.Name.split(' ')[1]);
                });

                return filtered;

            };
        });
    </script>

</body>

</html>
I have added a custom filter which sorts the array depending on the word after space and order the ng option depending on that. You can find the details of ng-options here.

Upvotes: 4

Mahesh Kumar
Mahesh Kumar

Reputation: 136

ng-repeat is working for me , check the pen

   <div class="form-group">
       <label>Branch : <i class="mandate">*</i></label>
       <select >
         <option value="" selected>Select Branch</option>
         <option ng-repeat=" item in main.items | orderBy:'toString()'" value="      {{item}}">{{item}}</option>
       </select>

     </div>

Upvotes: 3

Darshak
Darshak

Reputation: 867

try with this

 <div class="form-group">
  <label>Branch : <i class="mandate">*</i></label>
  <select class="form-control input-md" ng-model="query.branch" ng-options="showName(branch.branchName) as   showName(branch.branchName) for branch in baseBranches | orderBy:'branchName'">
    <option value="" selected>Select Branch</option>
  </select>
  <span class="error" ng-show="search_form.branchName.$error.required">Branch is required</span>
</div>

Upvotes: 1

Related Questions