Question

我要求以特定的分类顺序（字段名称不是按字母顺序排列）提供布尔值的动态排序，我不知道如何继续。

当标题图标为绿色（关闭）（也是默认值）时，表格应按名称排序。单击标题图标时，它变为黑色，排序顺序必须为need_vote（如果为true），has_comment（如果为true），过时（如果为true），列表的其余部分以及每个选项中的多个限定符应按名称排序

我创建了迄今为止的plunker。

HTML

<body ng-controller="MainCtrl">
    <table>
      <tr>
        <th style="text-align:center; width:100px;">
          <span ng-show="pending_view" 
                ng-click="pending_view = 0"
                class="glyphicon glyphicon-exclamation-sign"
                style="color:#000000;"></span>
          <span ng-show="!pending_view" 
                ng-click="pending_view = 1"
                class="glyphicon glyphicon-exclamation-sign"
                style="color:#009900;"></span>
        </th>
        <th>NAME</th>
      </tr>
      <tr ng-repeat="loan in loans | orderBy:'name'">
        <td>
          <!--NEED VOTE-->
          <span ng-show="loan.need_vote" class="glyphicon glyphicon-exclamation-sign" style="color:#000099;"></span>
          <span ng-show="!loan.need_vote" class="glyphicon glyphicon-exclamation-sign" style="color:#FFFFFF;"></span>
          <!--HAS COMMENT-->
          <span ng-show="loan.has_comment" class="glyphicon glyphicon-exclamation-sign" style="color:#e0a02d;"></span>
          <span ng-show="!loan.has_comment" class="glyphicon glyphicon-exclamation-sign" style="color:#FFFFFF;"></span>
          <!--STALE-->
          <span ng-show="loan.stale" class="glyphicon glyphicon-exclamation-sign" style="color:#990000;"></span>
          <span ng-show="!loan.stale" class="glyphicon glyphicon-exclamation-sign" style="color:#FFFFFF;"></span>
        </td>
        <td>{{loan.name}}</td>
      </tr>
    </table>
  </body>

角

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

app.controller('MainCtrl', function($scope) {
  $scope.pending_view = false;
  $scope.loans = [
    {need_vote: 0, has_comment: 0, stale: 0, name: 'Parker, Peter'},
    {need_vote: 1, has_comment: 0, stale: 0, name: 'Banner, Bruce'},
    {need_vote: 0, has_comment: 1, stale: 0, name: 'Prince, Diana'},
    {need_vote: 0, has_comment: 0, stale: 0, name: 'Barton, Clink'},
    {need_vote: 0, has_comment: 0, stale: 1, name: 'Wayne, Bruce'},
    {need_vote: 0, has_comment: 1, stale: 1, name: 'Stark, Tony'},
    {need_vote: 1, has_comment: 1, stale: 0, name: 'Romanoff, Natasha'},
    {need_vote: 0, has_comment: 0, stale: 0, name: 'Murdock, Matt'},
    {need_vote: 1, has_comment: 0, stale: 1, name: 'Blake, Donald'},
    {need_vote: 1, has_comment: 1, stale: 1, name: 'Rogers, Steve'}
  ];
});

--- --- UPDATE 正常工作时，如果图标为绿色，则列表应按名称排序（工作！）如果图标为黑色，则样本列表应按此顺序排列（所有need_votes按名称分类，然后所有has_comment按名称分类，然后所有陈旧按名称分类，最后其余按名称分类 -

Banner, Bruce      -- need_vote | name
Blake, Donald      -- need_vote | name
Rogers, Steve      -- need_vote | name
Romanoff, Natasha  -- need_vote | name
Prince, Diana      -- has_comment | name
Stark, Tony        -- has_comment | name
Wayne, Bruce       -- stale | name
Barton, Clint      -- name
Murdock, Matt      -- name
Parker, Peter      -- name

排序但不正确plunker

Answer 1

<强>更新

好的，这是我们在这里完全不同的问题。它需要类似但扩展的解决方案。

考虑一下：你有多个字段，你需要其中几个来确定排序的顺序。在这种情况下，您可以创建复合排序属性并使用如下公式：

 compoundSortField = 2**N * fieldN  + 2**(N-1) * fieldN-1 ... field1

在你的情况下，它将是：

 compoundSort = 4 * need_vote + 2 * has_comment + stale

您可以手动更改json，也可以在每次ajax请求后使用真实数据执行此操作。

接下来就是orderBy接受参数数组，这样可以做到这一点：

 <tr ng-repeat="loan in loans | orderBy:[myOrder, 'name']">

这意味着它首先由myOrder订购，然后按名称订购。

您的控制器代码将更改为：

 $scope.orderOptions = ['name','-compoundSort']

您的按钮将在name和-compoundSort之间切换，使其按名称排序，或按降序排序，然后按名称排序。

或者你可以有两个数组：

 $scope.simpleOrder = ['name']

 $scope.complexOrder = ['-compoundSort', 'name']

 $scope.myOrder = $scope.simpleOrder

并在它们之间切换myOrder。

在此处更新plnkr：http://plnkr.co/edit/dS9PNFdCiuP2p6RPPha2?p=preview

这是您更新的小提琴：http://plnkr.co/edit/EDHUJHxW5V2W5L8RHapn?p=preview

过滤器orderBy接受字符串作为参数，但您不需要提供字符串文字，它可以在范围内变量（如果使用controllerAs等，则可以是控制器字段）

<tr ng-repeat="loan in loans | orderBy:myOrder">

鉴于您将拥有几个像

这样的元素

  ... ng-click='myOrder="name"'

  ... ng-click='myOrder="need_vote"'

为了让一个按钮执行选项循环，您可以这样做：

 $scope.orderOptions = ['name', 'need_vote', ...]

 $scope.myOrder = 'name'

 $scope.orderOption = 0

 $scope.nextOrder = function() {
    $scope.orderOption ++ 
    if ($scope.orderOption >= $scope.orderOptions.length) $scope.orderOption = 0

    $scope.myOrder = $scope.orderOptions[$scope.orderOption]         
 }

 ...

 ng-click='nextOrder()'

AngularJS：我如何在动态标准上订购

1 个答案: