Question

我试图将表中的整数从最小到最大排序，但是3位数字会排在表格的底部。

我从mysql表中获取数据并使用angulars过滤器在表中对其进行排序＆＃34; orderBy＆＃34;像这样：

<table class="table table-hover">
    <thead>
    <td>name</td>
    <td>score</td>
    <td>diff</td>
    </thead>
    <tr ng-repeat="x in names | orderBy: '-score'">
        <td >{{x.name}}</td>
        <td >{{x.score}}</td>
        <td>{{(maxScore(names)-x.score)}}</td>
    </tr>
</table>

maxScore（names）只是在names数组中找到最大得分值并返回它：

JS：

$scope.maxScore = function(names){
    var max;
    for (var i = 0; i < names.length; i++) {
        if (names[i].score > (max || 0))
            max = names[i].score;
    }
    return max;
}

该表有3列（id，name，score），得分字段包含整数。

排序适用于2位数字，但如果名称[i] .score中的数字是1或3+位数，则排序失败 - 每个3位数的数字都会到达表格底部而不是顶部。所有的2位数字都按照预期从大到小排序。任何人都可以帮我找出原因？

Answer 1

我不知道具体是什么问题，但I cleaned up your code in a codepen似乎有效。

<!-- markup -->
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
      <th>Diff</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="player in players | orderBy:'-score'">
      <td>{{player.name}}</td>
      <td>{{player.score}}</td>
      <td>{{maxScore() - player.score}}
    </tr>
    <tr>
  </tbody>
</table>

// JS
function ctrl ($scope) {
  $scope.players = [
    // fake data with different digit scores
  ]

  $scope.maxScore = function() {
    var max;
    angular.forEach($scope.players, function(player) {
      if (player.score > (max || 0))
        max = player.score;
    });
    return max;
  }
}

也许你实际上并没有处理数字而是数字串，你应该先parseInt。

Answer 2

ranks in ranking | orderBy:max:'amount'

在ng-repeat中尝试此操作，这将有助于按最大值排序数据。

<div ng-controller="ExampleController">
  <table class="friends">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:'-age'">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>

You can always follow the docs

angularJS过滤器＆＃34; orderBy＆＃34;无法对3位以上的数字进行排序

2 个答案: