Question

我在我的HTML中拥有主队和远离Team Scorer，我想在几分钟（升序）中对每个目标得分者进行排序。这是HTML代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sort</title>

 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  <script src="angular/angular.min.js"></script>
  <script>
  (function(angular) {
  'use strict';
    angular.module('orderByScore', [])
    .controller('ScoreController', ['$scope', function($scope) {
    $scope.goals =
        [{scorer:'Glen', mins:'40"', type:'Own Goal', min:40},
         {scorer:'Beckham', mins:'20"', type:'Goal', min:20},
         {scorer:'Ronaldo', mins:'70"', type:'Own Goal', min:70}];

  }]);

    })(window.angular);
  </script> 
    <script>
  (function(angular) {
  'use strict';

    angular.module('orderByScore', [])
    .controller('ScoreControllerX', ['$scope', function($scope) {
    $scope.goalsx =
        [{scorer:'Glen', mins:'4"', type:'Goal', min:4},
         {scorer:'Glen', mins:'75"', type:'Goal', min:75},
         {scorer:'David', mins:'30"', type:'Own Goal', min:30}];

  }]);

    })(window.angular);
  </script> 





</head>
<body ng-app="orderByScore">
  <div ng-controller="ScoreController">
  <div class="home-team col-md-6">
    <table class="goalx">
        <tr style="display: none">
          <th>Scorer</th>
          <th>Minute</th>
          <th>Type</th>
          <th>Min</th>
        </tr>
        <tr ng-repeat="goalx in goalsx | orderBy:'+min'">
          <td>{{goal.scorer}}</td>
          <td>{{goal.mins}}</td>
          <td>{{goal.type}}</td>
          <td style="display: none">{{goal.min}}</td>
        </tr>
      </table>
    </div>  
    <div class="away-team col-md-6">
        <table class="goal">
        <tr style="display: none">
          <th>Scorer</th>
          <th>Minute</th>
          <th>Type</th>
          <th>Min</th>
        </tr>
        <tr ng-repeat="goal in goals | orderBy:'+min'">
          <td>{{goal.scorer}}</td>
          <td>{{goal.mins}}</td>
          <td>{{goal.type}}</td>
          <td style="display: none">{{goal.min}}</td>
        </tr>
      </table>
      </div>
</div>
 </body>
</html>

如果客队正在工作，主队不会显示。如果主队展示客场球队就会消失。我想要主场和客场球队的得分手展示。请帮助使它工作。

Answer 1

用ng-repeat中的goalx替换目标=＆＃34; goalx中的goalx | ORDERBY：＆＃39 +分钟＆＃39;像{{goalx.scorer}}

Answer 2

您必须使用ng-repeat过滤器。在您的情况下，您必须使用orderby过滤器。

<ul>
  <li ng-repeat="goal in goalsx | orderBy:'goal.mins'">{{goal.scorer}}</li>
</ul>

希望这有帮助。

Answer 3

在主队的情况下，你在目标x中使用了“ng-repeat = goalx”，但是在你使用“goal.scorer”，“goal.miins”等所有div的内部。所有你需要做的就是替换ng-repeat as“ng-repeat = goalx中的目标”。

<div class="home-team col-md-6">
    <table class="goalx">
        <tr style="display: none">
          <th>Scorer</th>
          <th>Minute</th>
          <th>Type</th>
          <th>Min</th>
        </tr>
        <tr ng-repeat="goal in goalsx | orderBy:'+min'"> // use 'goal in goalsx' here
          <td>{{goal.scorer}}</td>
          <td>{{goal.mins}}</td>
          <td>{{goal.type}}</td>
          <td style="display: none">{{goal.min}}</td>
        </tr>
    </table>
</div>  
<div class="away-team col-md-6">
    <table class="goal">
        <tr style="display: none">
          <th>Scorer</th>
          <th>Minute</th>
          <th>Type</th>
          <th>Min</th>
        </tr>
        <tr ng-repeat="goal in goals | orderBy:'+min'">
          <td>{{goal.scorer}}</td>
          <td>{{goal.mins}}</td>
          <td>{{goal.type}}</td>
          <td style="display: none">{{goal.min}}</td>
        </tr>
    </table>
</div>

使用Angular JS对内容进行排序

3 个答案: