为什么我的ng-repeat项目没有按预期过滤?

Leo*_*ban 2 javascript arrays angularjs angularjs-ng-repeat angularjs-filter

Plnkr: http://plnkr.co/edit/Q34J9szbLeGgc4jkcNUM?p=preview

我有一个名为tags的简单数组,它包含4个具有tweets值和vol值的对象.

在此输入图像描述

当我单击" 按推文订购""按订单按"按钮时,我希望这些数字有意义,例如从高到低或从低到高,但数字是乱序的.

标记:

 <div class="sidebar" ng-controller="sidebar">
  <header class="my-header">
    <button ng-click="reOrderByTweets()">Order by Tweets</button>
    <button ng-click="reOrderByVol()">Order by Vol</button>
  </header>
  <ul>
    <li ng-repeat="t in tags" ng-mouseleave="leaveTag(t)">
      <div class="tag-container">
        <div class="tag border1"
             ng-mouseover="showTagDetails(t)">{{t.name}} | tweets: {{t.tweets}} | vol: {{t.vol}}</div>
        <tag-details tag="t"></tag-details>
      </div>
    </li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

$scope.tags.push(
  {
    name: 'Item 1 ', 
    tweets: '412',
    vol: '50'
  },
  {
    name: 'Item 2 ', 
    tweets: '10',
    vol: '500'
  },
  {
    name: 'Item 3 ', 
    tweets: '67',
    vol: '5'
  },
  {
    name: 'Item 4 ', 
    tweets: '0',
    vol: '30'
  }
);
Run Code Online (Sandbox Code Playgroud)

功能:

function reOrderByTweets() {
    console.log('reOrderByTweets');
    vs.orderReverse = !vs.orderReverse;
    $scope.tags = $filter('orderBy')($scope.tags, 'tweets', vs.orderReverse);
    console.log('vs.orderReverse = ', vs.orderReverse); // true or false
    console.log('$scope.tags = ', $scope.tags);
}

function reOrderByVol() {
    console.log('reOrderByVol');
    vs.orderReverse = !vs.orderReverse;
    $scope.tags = $filter('orderBy')($scope.tags, 'vol', vs.orderReverse);
    console.log('vs.orderReverse = ', vs.orderReverse); // true or false
    console.log('$scope.tags = ', $scope.tags);
}
Run Code Online (Sandbox Code Playgroud)

正如您可以看到下面的屏幕截图,而Vol.该项目vol:5应该在最后vol:30

在此输入图像描述


更新:看起来它只是过滤了数字中的第一个数字?为什么不采取整个数字?

通过推文过滤点击一次:

在此输入图像描述

通过推文过滤第二次点击:

在此输入图像描述

Phi*_*ill 5

您按字母顺序排序,按字母顺序排序.

'10''5''30'

字符串顺序是10/30/5.

将"vol"和"tweets"更改为数字:

  $scope.tags.push(
    {
      name: 'Item 1 ', 
      tweets: 412,
      vol: 50
    },
    {
      name: 'Item 2 ', 
      tweets: 10,
      vol: 216
    },
    {
      name: 'Item 3 ', 
      tweets: 67,
      vol: 15
    },
    {
      name: 'Item 4 ', 
      tweets: 0,
      vol: 30
    }
  );
Run Code Online (Sandbox Code Playgroud)

正确排序您的推文.

在此输入图像描述