AngularJS按表排序行

发布时间：2020-12-17 08:59:14 所属栏目：安全来源：网络整理

导读：我有四个表标题： $scope.headers = ["Header1","Header2","Header3","Header4"]; 我想通过点击标题来排序我的表。所以如果我的表看起来像这样 H1 | H2 | H3 | H4A H D etc....B G CC F BD E A 我点击 H2 我的表现在看起来像这样： H1 | H2 | H3 | H4D E A

我有四个表标题：

$scope.headers = ["Header1","Header2","Header3","Header4"];

我想通过点击标题来排序我的表。

所以如果我的表看起来像这样

H1 | H2 | H3 | H4
A    H    D   etc....
B    G    C
C    F    B
D    E    A

我点击

H2

我的表现在看起来像这样：

H1 | H2 | H3 | H4
D    E    A   etc....
C    F    B
B    G    C
A    H    D

也就是说，每个列的内容从不改变，但是通过点击标题，我想按顺序排列列，行将重新排序自己。

我的表的内容是通过使用Mojolicious完成的数据库调用创建的，并通过返回给浏览器

$scope.results = angular.fromJson(data); // This works for me so far

我已经拼凑在一起的其余代码看起来像这样：

<table class= "table table-striped table-hover">
    <th ng-repeat= "header in headers">
        <a> {{headers[$index]}} </a>
    </th>
    <tr ng-repeat "result in results">
        <td> {{results.h1}} </td>
        <td> {{results.h2}} </td>
        <td> {{results.h3}} </td>
        <td> {{results.h4}} </td>
    </tr>
</table>

如何从这一点订购列，只需点击表顶部的标题即可？

我认为这个 working CodePen example，我创建将向您显示如何做你想要的。

模板：

<section ng-app="app" ng-controller="MainCtrl">
  <span class="label">Ordered By: {{orderByField}},Reverse Sort: {{reverseSort}}</span><br><br>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>
          <a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort">
          First Name <span ng-show="orderByField == 'firstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='lastName'; reverseSort = !reverseSort">
            Last Name <span ng-show="orderByField == 'lastName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='age'; reverseSort = !reverseSort">
          Age <span ng-show="orderByField == 'age'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort">
        <td>{{emp.firstName}}</td>
        <td>{{emp.lastName}}</td>
        <td>{{emp.age}}</td>
      </tr>
    </tbody>
  </table>
</section>

JavaScript代码：

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

app.controller('MainCtrl',function($scope) {
  $scope.orderByField = 'firstName';
  $scope.reverseSort = false;

  $scope.data = {
    employees: [{
      firstName: 'John',lastName: 'Doe',age: 30
    },{
      firstName: 'Frank',lastName: 'Burns',age: 54
    },{
      firstName: 'Sue',lastName: 'Banter',age: 21
    }]
  };
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!