为什么我的 ng-repeat 项目没有按预期在这里过滤? [英] Why are my ng-repeat items not filtering as expected here?

问题描述

Plnkr:

当我点击按推文排序或按数量排序按钮时，我希望数字有意义，例如从高到低或从低到高，但是数字乱了.

标记:

 
<header class="my-header"><button ng-click="reOrderByTweets()">按推文排序</button><button ng-click="reOrderByVol()">按成交量排序</button></标题><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}} |推文:{{t.tweets}} |卷:{{t.vol}}</div><tag-details tag="t"></tag-details>

JavaScript:

$scope.tags.push({name: '项目 1',推文:'412'，卷:'50'},{name: '项目 2',推文:'10'，卷:'500'},{name: '项目 3',推文:'67'，卷:'5'},{name: '项目 4',推文:'0'，卷:'30'});

功能:

function reOrderByTweets() {console.log('reOrderByTweets');vs.orderReverse = !vs.orderReverse;$scope.tags = $filter('orderBy')($scope.tags, 'tweets', vs.orderReverse);console.log('vs.orderReverse = ', vs.orderReverse);//对或错console.log('$scope.tags = ', $scope.tags);}函数 reOrderByVol() {console.log('reOrderByVol');vs.orderReverse = !vs.orderReverse;$scope.tags = $filter('orderBy')($scope.tags, 'vol', vs.orderReverse);console.log('vs.orderReverse = ', vs.orderReverse);//对或错console.log('$scope.tags = ', $scope.tags);}

正如您在下面的屏幕截图中看到的，按Vol 订购时.vol:5 的项目应该在 vol:30

之后排在最后

<小时>

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

按点击一次的推文过滤:

按第二次点击的推文过滤:

解决方案

您正在按按字母顺序完成的字符串值进行排序.

'10''5''30'

这个字符串的顺序是 10/30/5.

改变你的'vol' &推文"到数字:

 $scope.tags.push({name: '项目 1',推文:412，卷:50},{name: '项目 2',推文:10，卷:216},{name: '项目 3',推文:67，卷:15},{name: '项目 4',推文:0，卷:30});

正确排序您的推文.

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

I have a simple Array called tags, which contains 4 objects with a tweets value and vol value.

When I click the Order by Tweets, or Order by Vol buttons I expect the numbers to make sense, like going from high to low or low to high, but the numbers are out of order.

Markup:

 <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>

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'
  }
);

The functions:

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);
}

As you can see the screenshot below, while ordering by Vol. The item with vol:5 should come last after vol:30

---

Update: Looks like it's only filtering on the first digit in the numbers? Why would it not take the entire number?

Filtering by tweets clicked once:

Filtering by tweets clicked a 2nd time:

解决方案

You're ordering by a string value which is done by alphabetical order.

'10' '5' '30'

The string order of this is 10 / 30 / 5.

Changing your 'vol' & 'tweets' to numbers:

  $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
    }
  );

Sorts your tweets correctly.

这篇关于为什么我的 ng-repeat 项目没有按预期在这里过滤?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！