为什么没有过滤我的NG-重复的项目,如预期的在这里? [英] Why are my ng-repeat items not filtering as expected here?
问题描述
Plnkr: 的http:// plnkr .CO /编辑/ Q34J9szbLeGgc4jkcNUM?p = preVIEW
Plnkr: http://plnkr.co/edit/Q34J9szbLeGgc4jkcNUM?p=preview
我有一个简单的阵列称为标记,它包含4个对象有鸣叫价值和体积值。
I have a simple Array called tags, which contains 4 objects with a tweets value and vol value.
当我通过推文或按VOL定单点击订单按钮,我期待的数字变得有意义,就像从高去低或从低到高,但数字是坏了。
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.
标记:
<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'
}
);
功能:
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);
}
正如你可以看到下面的截图,而通过订购的卷。与该项目第5
后应放在最后卷: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:
过滤通过微博点击的第2次:
Filtering by tweets clicked a 2nd time:
推荐答案
您是通过由字母顺序做了一个字符串值排序。
You're ordering by a string value which is done by alphabetical order.
'10'
'5'
30
'10' '5' '30'
这个字符串顺序为10/30/5。
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-重复的项目,如预期的在这里?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!