Question

我从web api填充表中客户的简短信息。我想要实现的是当有人点击Customer Name文本时，那里的名字应该按升序排序，而另一次点击它应该切换到降序。默认情况下，当页面加载时，它按ID降序排列列表

HTML

<table class="table table-striped table-hover">
  <tr class="success">
    <td><strong><a href="#">Customer Name</a></strong></td>
    <td><strong>Phone Number</strong></td>
    <td><strong>Address</strong></td>
    <td><strong>Gender</strong></td>
    <td><strong>Email</strong></td>
    <td><strong>User Group</strong></td>
  </tr>
  <tr ng-repeat="item in users_list | orderBy:'-ID'">
    <td>{{item.Customer_Name}}</td>
    <td>{{item.Phone_Number}}</td>
    <td>{{item.Address}}</td>
    <td>{{item.gender}}</td>
    <td>{{item.email}}</td>
    <td>{{item.user_group}}</td>
  </tr>
  </table>

JS

.controller('app_users_ctrl',function($scope,$http,$location){
    $scope.loading=true;
    $http.post('http://localhost/calls/app_users.php').success(function(data){
    $scope.users_list=data
    console.log(JSON.stringify(data));
    $scope.loading=false;
        })
    })

Answer 1

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="orderCtrl">

<ul>
<li ng-repeat="x in cars | orderBy">{{x}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];
});
</script>

<p>The array items are displayed alphabetically.</p>

</body>
</html>

由于我没有您的JSON数据，我添加了一个按升序排序的简单示例。我们所要做的就是使用orderBy过滤器。

Answer 2

假设您将字段存储在values数组中，以便升序和onclick：

values.sort(function(value1,value2){ return value2 - value1; });

按降序排列：

values.sort(function(value1,value2){ return value1 - value2; });

希望它有所帮助。另外，在函数内部使用一个标志来处理它的排序顺序。

Answer 3

https://scotch.io/tutorials/sort-and-filter-a-table-using-angular

按照该指南。当我不得不做你必须做的事情时，它帮助了我！

Answer 4

你好累了吗：

<table class="table table-striped table-hover">
  <tr class="success">
    <td><strong><a clikme('Customer_Name')>Customer Name</a></strong></td>
    <td><strong><a clikme('Phone_Number')>Phone Number</a></strong></td>
    <td><strong>Address</strong></td>
    <td><strong>Gender</strong></td>
    <td><strong>Email</strong></td>
    <td><strong>User Group</strong></td>
  </tr>
  <tr ng-repeat="item in users_list | orderBy: myvar">
    <td >{{item.Customer_Name}}</td>
    <td >{{item.Phone_Number}}</td>
    <td>{{item.Address}}</td>
    <td>{{item.gender}}</td>
    <td>{{item.email}}</td>
    <td>{{item.user_group}}</td>
  </tr>
  </table>

和你在js：

.controller('app_users_ctrl',function($scope,$http,$location){
    $scope.loading=true;
    var order = false;

$http.post('http://localhost/calls/app_users.php').success(function(data){
    $scope.users_list=data
    console.log(JSON.stringify(data));
    $scope.loading=false;
        })
    })

$scope.clikme= function(field){

 $scope.myvar= order ? '-' + field : '+' + field;
order=!order;
}

Answer 5

这是使用angularJS中的表和排序anf过滤器的简单示例

angular.module("myApp", ["ngTable"]);


//This is your controller

var self = this;
var data = [{name: "Deon", age: 22} /*,*/];
self.tableParams = new NgTableParams({}, { dataset: data});

<table ng-table="vm.tableParams" class="table" show-filter="true">
    <tr ng-repeat="user in $data">
        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
            {{user.name}}</td>
        <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
            {{user.age}}</td>
    </tr>
</table>

Answer 6

很简单，添加ng-click =＆＃34; sortType ==＆＃39; customer-name＆＃39;＆＃34;或者你想在每个表格上排序的其他任何东西。顺便说一句，你应该修改你的表并使用thead＆gt;标题。这是格式化它的正确方法。

Answer 7

创建一个范围变量，用于存储搜索条件。将orderBy值设置为此变量。如果您想通过其他财产订购，请更改该变量。

为升序/降序排序创建另一个变量，并将其添加到orderBy过滤器。您现在可以更改这些变量以影响订单行为。

HTML：

<tr ng-repeat="item in users_list | orderBy: criteria: isDescending">

JS控制器：

$scope.criteria = '-ID';
$scope.isDescending = true;

按名称在列表中按升序排序，点击angularjs

7 个答案: