I have my result showing here

<div ng-repeat="o in vm.gridOptions.data | filter:filt | oderBy : 'title'">
    <span>{{o.title}}</span>
</div>

which shows

<div ng-repeat="o in vm.gridOptions.data">
    <span>aaa</span>
    <span>ggg</span>
    <span>ccc</span>
    <span>bbb</span>
</div>

I have a select dropdown. I should able to sort my result alphabetally after i select 'Alphabetical' option

<select ng-model="filt">
    <option value="-1">vsf</option>
    <option>Alphabetical</option>
    <option>sccc</option>                                    
</select>

Initially i have put orderBy:'title'. but this should happen after i select dropdown. how to achieve this ?

I have my result showing here

<div ng-repeat="o in vm.gridOptions.data | filter:filt | oderBy : 'title'">
    <span>{{o.title}}</span>
</div>

which shows

<div ng-repeat="o in vm.gridOptions.data">
    <span>aaa</span>
    <span>ggg</span>
    <span>ccc</span>
    <span>bbb</span>
</div>

I have a select dropdown. I should able to sort my result alphabetally after i select 'Alphabetical' option

<select ng-model="filt">
    <option value="-1">vsf</option>
    <option>Alphabetical</option>
    <option>sccc</option>                                    
</select>

Initially i have put orderBy:'title'. but this should happen after i select dropdown. how to achieve this ?

• javascript
• angularjs
• filter
• angular-ngmodel
• angular-filters

• Alphabetical is any column of your array? – Ramesh Rajendran Commented Jan 4, 2017 at 5:38
• No... Alphabetical is just an option from select dropdown.. – Matarishvan Commented Jan 4, 2017 at 5:40
• @Matarishvan did you checked my answer ? – Rohìt Jíndal Commented Jan 6, 2017 at 3:39

5 Answers 5

You can try this:

<div ng-repeat="o in vm.gridOptions.data | filter:filt | oderBy : filt?'title':''">

<select ng-model="filt">
  <option>Alphabetical</option>
  <option>k</option>
</select>
<p ng-if="filte=(filt=='Alphabetical')?'':'o.title' "></p>
<div ng-repeat="o in vm.gridOptions.data | orderBy: filte">
<span>{{o.title}}</span>

It is better if you do the filtering and sorting in controller. You can change the Array.prototype.sort() function as per your requirement

Controller

$scope.data=[{
    "title" : "gggg"
},{
    "title" : "cccc"
},{
    "title" : "zzzz"
},{
    "title" : "aaaa"
}];
$scope.sortvalue = "None";

$scope.changeSortOrder = function()
{
  if($scope.sortvalue == "Alphabetically")
  {
    $scope.data.sort(function(a, b){
      if(a.title < b.title) return -1;
      if(a.title > b.title) return 1;
      return 0;
    });
  }
}

HTML

<div ng-controller="myCtrl">
    <div ng-repeat="o in data">
      <span>{{o.title}}</span>
    </div>
    <div>
     <select ng-model="sortvalue" ng-change="changeSortOrder()">
      <option value="None">Select an option</option>
      <option value="Alphabetically">Alphabetically</option>
     </select>
    </div>
  </div>

FULL EXAMPLE

Here is a list of examples that uses Array.prototype.sort() to sort arrays

Try this way :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.data = [{
        "title" : "aaa"
    },{
        "title" : "ggg"
    },{
        "title" : "ccc"
    },{
        "title" : "bbb"
    }];
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-model="filt">
    <option value="-1">vsf</option>
    <option value="title">Alphabetical</option>
    <option>sccc</option>                                    
  </select>
  <div ng-repeat="o in data | orderBy:filt">
   {{o.title}}
</div>

Very simple..

You want to sort Alphabetically.. means u have to pass value as 'title' to your option 'Alphabetical'. because based on 'title' the result will sort

<select ng-model="filt">
    <option value="-1">vsf</option>
    <option value="title">Alphabetical</option>
    <option>sccc</option>                                    
</select>

Then in your div

<div ng-repeat="o in vm.gridOptions.data | orderBy:filt">

orderBy: filt will execute only for your option value='title'. That is where sorting happens