角JS排序由表头行 [英] Angular JS sorting rows by table header

问题描述

我有4个表头

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

和我希望能够通过点击标题，我的表进行排序。

And I want to be able to sort my table by clicking on the header.

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

So if my table looks like this

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

和我点击

H2

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

my table now looks like this

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

也就是说，每列永不改变的内容，但通过点击标题我想订购的列，行会重新安排自己。

That is, the content of each column never changes, but by clicking on the header I want to order the columns by, the rows will reorder themselves.

我的表的内容是由与mojolicious做了DB调用创建，并返回到浏览器

The content of my table is created by a DB call done with mojolicious, and is returned to the browser with

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

在code我已经拼凑起来的其余部分看起来像这样

The rest of the code I have cobbled together looks something like this

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

有没有人知道如何从这个角度命令列，只通过点击标题在表的顶部？

Would anyone know how to order the columns from this point, just by clicking on the header at the top of the table?

推荐答案

我觉得这工作codePEN例如，我创建的确切告诉你如何做你想做的。

I think this working CodePen example that I created will show you exactly how to do what you want.

模板：

<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的：

The 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
    }]
  };
});

这篇关于角JS排序由表头行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！