根据 Angular 中的标题对表格中单列中的数据进行排序

Posted 2023-05-09

【中文标题】根据 Angular 中的标题对表格中单列中的数据进行排序

【英文标题】：Sort data in Single column on the table based on the Heading in Angular

【发布时间】：2017-12-04 11:05:10

【问题描述】：

我正在做的是在一个表中对单个或多个列执行排序操作。假设我们有一个这样的表。

点击标题 1 时，只需对数据 1 和数据 2 进行排序。点击标题 2 时，需要对数据 3 和数据 4 进行排序。

已经在 Angular 中为表格实现了简单排序，但不知道如何在单个列中使用两组数据来实现这一点。

即使尝试单独的表，因为 Angular 中的 order by 基于数组中的键，当单击标题 1 时，两者（数据 1、2、3 和 4）都会更新。

ng-repeat 用于形成表格

谁能指出我正确的方向（在 Angular 1.x 上）？

Sample Fiddlehttp://jsfiddle.net/ANEA6/13/

【问题讨论】：

如果您发布您的 html，它会更容易提供帮助

^^ 和 javascript。

提供一些代码以了解您的代码的实际状态

已添加小提琴@TonySamperi 和其他人

好的，我去看看

【参考方案1】：

问题是你使用相同的变量来处理相反的事情！

<div ng-controller="MyCtrl">
  <table class="table">
    <tr class="heading">
      <td ng-click="reverse1=!reverse1;predicate1='id'">id</td>
    </tr>
    <tr ng-repeat="user in users | orderBy:predicate1:reverse1">
      <td>user.id</td>
    </tr>
    <tr class="heading">
      <td ng-click="reverse2=!reverse2;predicate2='id'">id</td>
    </tr>
    <tr ng-repeat="user in users | orderBy:predicate2:reverse2">
      <td>user.id</td>
    </tr>
  </table>
</div>

你可以检查这个工作小提琴 ==> http://jsfiddle.net/ANEA6/17/

【参考方案2】：

为什么不为每个<tr> 创建一个单独的范围变量，其中<td> 内部有id，就像这样

<div ng-controller="MyCtrl">
  <table class="table">
      <tr><td ng-click="reverse1=!reverse1;predicate1='id'">id</td></tr>
      <tr ng-repeat="user in users | orderBy:predicate1:reverse1">
          <td>user.id</td>
      </tr>
      <tr><td ng-click="reverse2=!reverse2;predicate2='id'">id</td></tr>
      <tr ng-repeat="user in users | orderBy:predicate2:reverse2">
          <td>user.id</td>
      </tr>
    </table>
</div>

控制器

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

//myApp.directive('myDirective', function() );
//myApp.factory('myService', function() );

function MyCtrl($scope) 
    $scope.users = [
        id:1,
        id:2

    ]

这应该适用于您的情况，因为我看不到 <td> 和 id 是动态生成的。它使用id 硬编码为两行。 id <tr> 后面的另一个 <tr> 是使用 ng-repeat 动态生成的，所以这应该没问题。

为简单起见，这里是JSFIDDLE的工作链接

【讨论】：

这是一个巧合，我们都有相同的变量名。我没有复制你的。这是我们发布的同一时间。