javascript - 按表排序

Question

我有一个带有 ng-repeat 的表，如果用户选择其中一个过滤器，则必须根据该过滤器来容纳它，但是我遇到了根据该过滤器以降序方式容纳表的问题。如果用户选择“限制”，则表必须按限制排序，如果用户选择“余额”，则必须按余额排序

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

您可以动态定义数组中的属性，您的表将按该数组排序

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

这是一个工作示例

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>