AngularJs 动态 orderBy 表达式答案

【问题标题】：AngularJs dynamic orderBy expressionAngularJs 动态 orderBy 表达式
【发布时间】：2015-07-09 10:40:56
【问题描述】：

下面是代码。我嵌套了 ng-repeat 和一个包含所有其他字段总和的字段。

<div class="animate margin-top" >
        <div layout="row" layout-align="center"  ng-repeat="data in leaderBoardData | orderBy: 'getTotal($index)'" style = "padding: 10px;" class= "md-padding">
            <section class="text-center width-20"><a>{{data.handleName}}</a></section>
            <section class="text-center width-20" ng-repeat="score in data.score track by $index">{{score}}</section>
            <section class="text-center width-20">{{getTotal($index)}}</section>
        </div>
</div>

所以我想根据动态字段getTotal($index)进行排序。我该怎么做？上面的 orderBy 不起作用。

下面是getTotal()函数的代码

$scope.getTotal = function (index) {
    var total = 0
    $scope.leaderBoardData[index].score.forEach(function (score) {
        total = total + score
    })
    return total
}

下面是排行榜数据

var leaderBoardData = [ { handleName: 'xyz', score: [1,2,3] },{ handleName: 'acc', score: [4,5,6] } ]

【问题讨论】：

您想按“总”属性对其进行排序吗？请分享示例“leaderBoardData”结构
@RIYAJKHAN 是的！按总属性。将编辑并放置代码
@RIYAJKHAN 查看数据！
您要按分数对数据进行排序吗？
@RIYAJKHAN 总分

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

删除 orderBy 表达式的引号，因此 Angular 知道它是一个函数，您不需要显式传递 $index 作为参数。
您需要将此{{getTotal($index)}} 更改为{{getTotal(data)}}，因为此处已迭代数据。

所以，基本上：

function Ctrl($scope) {

  $scope.leaderBoardData = [{
    handleName: 'xyz',
    score: [4, 5, 6]
  }, {
    handleName: 'acc',
    score: [1, 2, 3]
  }, {
    handleName: 'acFc',
    score: [1, 2, 4]
  }];

  $scope.getTotal = function(index) {
    var total = 0;
    // also change to index as array already passed to function
    index.score.forEach(function(score) {
      total = total + score;
    })
    return total;
  };
}

<!DOCTYPE html>
<html ng-app>

<head></head>

<body>
  <div>
    <div ng-controller="Ctrl" class="animate margin-top">
      <div layout="row" layout-align="center" ng-repeat="data in leaderBoardData | orderBy: getTotal" style="padding: 10px;" class="md-padding">
        <section class="text-center width-20">
          <a>{{data.handleName}}</a>
        </section>
        <section class="text-center width-20" ng-repeat="score in data.score track by $index">{{score}}</section>
        <section class="text-center width-20">
          <!-- change is here -->
          {{getTotal(data)}}
        </section>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

</html>

【讨论】：

我发布了数组数据！
工作！ :D 谢谢！所以我在 orderby 中传递函数是错误的？ getTotal() ?
no orderby 也没有函数，但是你用单引号包裹它，根据docs.angularjs.org/api/ng/filter/orderBy 它认为它是一个字符串
哦！哦！非常感谢

【解决方案2】：

我猜测 $scope.leaderBoardData 不是数组（它是对象的对象），并且 orderBy 过滤器仅适用于数组。如果您将 $scope.leaderBoardData 设为数组，它将起作用

【讨论】：

【解决方案3】：

我猜你没有正确使用 forEach。

    $scope.getTotal = function (index) {
    var total = 0;
    angular.forEach($scope.leaderBoardData,function(score,index){
        total = total + score
    })
    return total;
}

试试这个，它应该可以工作。

【讨论】：

【解决方案4】：

你可以这样做。 HTML

<div layout="row" layout-align="center"  ng-repeat="data in leaderBoardData | orderBy: 'totalScore'" style = "padding: 10px;" class= "md-padding">
            <section class="text-center width-20"><a>{{data.handleName}}</a></section>
            <section class="text-center width-20" ng-repeat="score in data.score track by $index">{{score}}</section>
            <section class="text-center width-20">total score={{data.totalScore}}</section>
        </div>

JS：

$scope.leaderBoardData =  [ { handleName: 'xyz', score: [111,21,3] },{ handleName: 'acc', score: [14,5,16] } ];

     $scope.leaderBoardData.forEach(function(oneRecord,key){
        var total=0;
        oneRecord.score.forEach(function(oneEle,key){
            total = total + oneEle

        })
        oneRecord.totalScore = total;

     })

【讨论】：

是的，我试过这样！但是我认为当我们可以使用角度功能时，这不是正确的方法！