Cannot order drop down list value alphabetically using Angular.js

Question

The drop down list can not ordered alphabetically using Angular.js. Here is my code:

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Business Name :</span>
<select class="form-control"  id="restau" ng-model="restaurant" ng-options="qua.name for qua in listOfRestaurant | orderBy:'name' track by qua.value" ng-change="getDayFromSpecial('restau');">
 </select>
</div> 

$scope.listOfRestaurant=[{
        name:'Select Business Name',
        value:''
}]
$scope.restaurant=$scope.listOfRestaurant[0];

$http({
        method:'GET',
        url:"php/customerInfo.php?action=restaurant",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
        angular.forEach(response.data,function(obj){
            var data={'name':obj.rest_name,'value':obj.member_id};
            $scope.listOfRestaurant.push(data);
        })
    },function errorCallback(response) {
    })

Here my problem is I can order the list but Select Business Name is coming in middle in this list which should come only first and selected.

@Sajeetharan : All json value coming from database.I am updating my post again. — satya
– satya, Commented Oct 12, 2016 at 7:21
I presume you're appending the select with your $scope.listOfRestaurant array? If so, add the Select Business Name option first then append the rest — StudioTime
– StudioTime, Commented Oct 12, 2016 at 7:25
@DarrenSweeney : I am adding Select Business Name for 0th index. Check. — satya
– satya, Commented Oct 12, 2016 at 7:30

Anil Kumar Ram · Accepted Answer · 2016-10-12 07:56:24Z

1

you can write like this.

<select name="quarter" ng-model="Quarter" 
        ng-options="obj.value as obj for obj in options | orderBy:'toString()'">
        <option value="" >Select Business Name</option>
</select>

don't put your select business name in data list.

answered Oct 12, 2016 at 7:56

Anil Kumar Ram

1,22111 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

satya Over a year ago

but i can not get this value $scope.Quarter.value.its throwing error.

Anil Kumar Ram Over a year ago

hi satya, i ve created fiddle for u just check, hope this will help you . jsfiddle.net/upj8n47m/1

Pawan B · Accepted Answer · 2016-10-12 07:32:36Z

0

By using orderBy:'toString()' with ng-repeat you can sort list value alphabetically using angular.js

Example :

<select name="quarter" ng-model="Quarter" 
        ng-options="obj.value as obj for obj in options | orderBy:'toString()'">

</select>

Check this jsfiddle

answered Oct 12, 2016 at 7:32

Pawan B

4,6332 gold badges27 silver badges39 bronze badges

2 Comments

satya Over a year ago

@ p2 : i can oreder properly but 0th index text is coming 2 times. Please check my post again.

Pawan B Over a year ago

@satya: if you can show some sample of response that would really help me

Collectives™ on Stack Overflow

Cannot order drop down list value alphabetically using Angular.js

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related