在Angular中对许多相同的表进行排序

时间:2016-04-26 14:11:17

标签: javascript angularjs

我正在尝试使用Angular对相同的结构表进行排序,但不同的数据。 Plunker示例可以看到here

问题是如何只为特定表排序而不是为所有表排序。我想我可以通过创建新变量来为不同的表存储不同的值来实现结果,但是有任何替代和有效的方法来实现它。

示例数据:

$scope.friends =
    [{name:'John', phone:'555-1212', age:10},
     {name:'Mary', phone:'555-9876', age:19},
     {name:'Mike', phone:'555-4321', age:21},
     {name:'Adam', phone:'555-5678', age:35},
     {name:'Julie', phone:'555-8765', age:29}];

$scope.close_friends =
    [{name:'Alan', phone:'555-1212', age:21},
     {name:'Jen', phone:'555-9876', age:29},
     {name:'David', phone:'555-4321', age:24},
     {name:'Raya', phone:'555-5678', age:25},
     {name:'Brok', phone:'555-8765', age:28}];

$scope.very_close_friends =
    [{name:'Peter', phone:'555-1212', age:41},
     {name:'Beck', phone:'555-9876', age:39}];

2 个答案:

答案 0 :(得分:1)

不使用订单功能:

<table class="friend">
    <tr>
     <th>
         <button ng-click="reverse1=!reverse1; predicate = 'name'">Name</button>
         <span class="sortorder" ng-if="predicate === 'name'" ng-class="{reverse:reverse1}"></span>
     </th>
     <th>
         <button ng-click="reverse1=!reverse1; predicate = 'phone'">Phone Number</button>
         <span class="sortorder" ng-if="predicate === 'phone'" ng-class="{reverse:reverse1}"></span>
     </th>
     <th>
         <button ng-click="reverse1=!reverse1; predicate = 'age'">Age</button>
         <span class="sortorder" ng-if=" predicate === 'age'" ng-class="{reverse:reverse1}"></span>
     </th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:predicate:reverse1">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>

plunker:https://plnkr.co/edit/zxPOX41fkcKWsA3xRSW7?p=preview

答案 1 :(得分:0)

将orderBy属性添加到每个数组,并按ng-repeat中的该属性进行排序。

/dev/stderr

如果您真的要拥有这样的各种类似的列表,我建议您调查为它创建指令或组件。它会更有效率。