使用angularJS在表中排序行或列

时间:2014-01-07 01:36:42

标签: angularjs

我使用AngularJS在表格中手动排序列。现在我遇到的问题是我需要以非常特定的方式排序行(很像列)。而不是在Html中使这个表格变得庞大,我宁愿四处询问是否有一种方法可以在.js脚本中定义一个数组,并让列/行根据这些数组自行排序。

我已经看到很多关于如何按字母顺序或按索引排序的示例,但到目前为止还没有显示如何按预定义数组排序。

以下是我正在使用的表格:

<table>
  <thead>
    <tr>
      <th>
        <select ng-init="selectedRace='Human'" ng-model="selectedRace">
          <option ng-repeat="(raceName, item) in races">{{raceName}}</option>
        </select>
      </th>
      <!--<th ng-repeat="(statGroup, item) in race.Attributes" class="{{statGroup}}">{{statGroup}}</th>-->
      <!--Going to manually type the column headers until I figure out how to sort via array or something-->
      <th>Starting Attribuites</th>
      <th>Hero Limit</th>
      <th>Epic Limit</th>
      <th>Veteran Limit</th>
    </tr>
  </thead>
  <tbody ng-model="race.Attributes">
    <tr ng-repeat="(statName, item) in race.Attributes['Starting Attributes']">
      <td class="statsDes">{{statName}}</td><!--These are not in proper order! I need to sort this via array or something-->
      <td class="Starting Attributes">{{race.Attributes['Starting Attributes'] | FilterSet:statName}}</td>
      <td>{{race.Attributes['Hero Limit'] | FilterSet:statName}}</td>
      <td>{{race.Attributes['Epic Limit'] | FilterSet:statName}}</td>
      <td>{{race.Attributes['Veteran Limit'] | FilterSet:statName}}</td>
    </tr>
  </tbody>
</table>
</br>

有什么想法吗?除了手动操作?

1 个答案:

答案 0 :(得分:1)

当您拥有AngularJS时,无需手动执行任何操作。

AngularJS提供orderBy过滤器,按表达式(http://docs.angularjs.org/api/ng.filter:orderBy)对数组进行排序。

如果您需要某些默认orderBy过滤器不支持的功能,您可以编写自己的自定义过滤器来根据自己的喜好操作(排序)数组。

您可以在http://docs.angularjs.org/tutorial/step_09上了解有关自定义过滤器的详情。

希望有所帮助!