OrderBy a table angularJs

Question

I have a table with ng-repeat, if the user selects one of the filters, it must be accommodated according to that filter, but I have the problem of accommodating it in a descending way the table according to that filter. if the user select "Limit" the table must orderBy Limit and if he select "Balance" orderBy Balance

enter code here

//Select for filter
<div class="input-group">
        <select class="form-control" ng-model="vm.form.type"
        ng-options='option.value as option.name for option in vm.typeOptions'
        ng-change="vm.showButton(vm.form.type)">
        </select>
</div>

//Table
<tr ng-repeat="x in vm.baseData " >
            <td>{{x.Name}}</td>
            <td>{{x.Balance}}</td>
            <td>{{x.Limit}}</td>

</tr>


//Array Object
vm.baseData = [
      {'Name':"Aleatea", 'Balance':'$5,000.00','Limit':'$3,455.00'},
      {'Name':"Tiempo", 'Balance':'$34,754.00','Limit':'$2,234.00'},
      {'Name':"Seni", 'Balance':'$5,000.00','Limit':'$123.00'}
]

Answer 1

Try using the orderBy filter. Something like this:

<tr ng-repeat="x in vm.baseData | orderBy:vm.query" >

Documentation here

Answer 2

尝试这个：

<tr ng-repeat="x in vm.baseData | orderBy:vm.form.type: reverse| groupBy: 'name'" >

Answer 3

You can dynamically define the properties in an array which your table will be ordered by

ng-repeat="x in vm.baseData | orderBy:vm.arr"

Here's a working example

 angular.module("app",[]).controller("myCtrl", function(){ var vm = this; vm.baseData = [ {'Name':"Aleatea", 'Balance':'$5,000.00','Limit':'$3,455.00'}, {'Name':"Tiempo", 'Balance':'$34,754.00','Limit':'$2,234.00'}, {'Name':"Seni", 'Balance':'$5,000.00','Limit':'$123.00'}, {'Name':"Seni", 'Balance':'$5,000.00','Limit':'$123.00'}, {'Name':"Seni", 'Balance':'$6,340.00','Limit':'$143.00'} ]; vm.typeOptions = [{'name': 'Name', 'value': 'Name'}, {'name': 'Balance', 'value': 'Balance'}, {'name': 'Limit', 'value': 'Limit'}]; vm.orderFunc = function(){ vm.arr = []; vm.arr.push(vm.type); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="myCtrl as vm"> <div class="input-group"> <select class="form-control" ng-model="vm.type" ng-options='option.value as option.name for option in vm.typeOptions' ng-change="vm.orderFunc()"> </select> </div> <div> <table> <tr ng-repeat="x in vm.baseData | orderBy:vm.arr"> <td>{{x.Name}}</td> <td>{{x.Balance}}</td> <td>{{x.Limit}}</td> </table> </tr> </div> </div> 

Answer 4

As others have pointed out, you need to use orderBy filter. The first parameter would be the name of the property being used to order and the second a boolean indicating if the sort is in reverse order as default is ascending.

Take in mind that Balance and Limit are strings and will be ordered alphabetically. You can write a custom comparator or you can make sure to have the original numerical values as a property in your data.

//Table
<tr ng-repeat="x in vm.baseData | orderBy : vm.form.type : true" >
            <td>{{x.Name}}</td>
            <td>{{x.Balance}}</td>
            <td>{{x.Limit}}</td>

</tr>