0

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 ?

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

5 Answers 5

1

You can try this:

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

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

Comments

1
<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>

Comments

1

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

Comments

1

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.com/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>

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.