如何使用子数组对json表进行排序

时间:2017-02-02 09:46:56

标签: html angularjs html-table

我有以下JSON(见下文)。我把数据放在一个html表中,工作正常。我可以对名称字段进行排序,但是如何在angularjs中的点表中对字段进行排序?

我尝试了orderBy values.points.punten,但这不起作用。

    // create the list
$scope.values = [    
      {
          name: 'Johan',
          points: [
              {
                  punten: '4567',
                  pit: '1',
                  field: 'p0'
              },
              {
                  punten: '5422',
                  pit: '0',
                  field: 'p1'
              },              {
                  punten: '5422',
                  pit: '0',
                  field: 'p2'
              }
          ]
      },
      {
          name: 'Ton',
          points: [
              {
                  punten: '4444',
                  pit: '2',
                  field: 'p0'
              },
              {
                  punten: '5100',
                  pit: '1',
                  field: 'p1'
              },
              {
                  punten: '5423',
                  pit: '0',
                  field: 'p2'
              }
          ]
      },
      {
          name: 'Dian',
          points: [
              {
                  punten: '4765',
                  pit: '0',
                  field: 'p0'
              },
              {
                  punten: '4952',
                  pit: '0',
                  field: 'p1'
              },
              {
                  punten: '5424',
                  pit: '0',
                  field: 'p2'
              }
          ]
      },
      {
          name: 'Kees',
          points: [
              {
                  punten: '3765',
                  pit: '0',
                  field: 'p0'
              },
              {
                  punten: '3952',
                  pit: '0',
                  field: 'p1'
              },
              {
                  punten: '3424',
                  pit: '0',
                  field: 'p2'
              }
          ]
      }

  ];

1 个答案:

答案 0 :(得分:0)

以下是orderBy 双关语

的代码

由于您在点数组中有punten

<li ng-repeat="x in values | orderBy:'points[0].punten'">{{x}}</li>

var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
   $scope.values = [    
      {
          name: "Johan",
          points: [
              {
                  punten: "4567",
                  pit: "1",
                  field: "p0"
              },
              {
                  punten: "5422",
                  pit: "0",
                  field: "p1"
              },              {
                  punten: "5422",
                  pit: "0",
                  field: "p2"
              }
          ]
      },
      {
          name: "Ton",
          points: [
              {
                  punten: "4444",
                  pit: "2",
                  field: "p0"
              },
              {
                  punten: "5100",
                  pit: "1",
                  field: "p1"
              },
              {
                  punten: "5423",
                  pit: "0",
                  field: "p2"
              }
          ]
      },
      {
          name: "Dian",
          points: [
              {
                  punten: "4765",
                  pit: "0",
                  field: "p0"
              },
              {
                  punten: "4952",
                  pit: "0",
                  field: "p1"
              },
              {
                  punten: "5424",
                  pit: "0",
                  field: "p2"
              }
          ]
      },
      {
          name: "Kees",
          points: [
              {
                  punten: "3765",
                  pit: "0",
                  field: "p0"
              },
              {
                  punten: "3952",
                  pit: "0",
                  field: "p1"
              },
              {
                  punten: "3424",
                  pit: "0",
                  field: "p2"
              }
          ]
      }

  ];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="orderCtrl">

<ul>
<li ng-repeat="x in values | orderBy:'points[0].punten'">{{x}}</li><br>
</ul><br>

</div>



<p>The array items are displayed alphabetically.</p>

</body>
</html>

请跑上面的SNIPPET

HERE IS A WORKING DEMO