Question

我有一个angularjs转发器。

 <tbody data-ng-repeat="game in model.Games | unique:'Number'">
    <tr><td colspan="3">{{game.Location}}</td></tr>
    <tr>
       <td>{{game.Number}}</td>
       <td>{{game.Away}}</td>
       <td>{{game.Home}}</td>
    </tr>
 </tbody>

在game中，有一个属性Location将保持不变，然后在某些时候更改，例如：

[
    { Number: 1, Location: 'Place 1', Home: 'Team 1', Away: 'Team 2' },
    { Number: 1, Location: 'Place 1', Home: 'Team 3', Away: 'Team 4' },
    { Number: 2, Location: 'Place 1', Home: 'Team 1', Away: 'Team 2' },
    { Number: 2, Location: 'Place 1', Home: 'Team 3', Away: 'Team 4' },
    { Number: 3, Location: 'Place 2', Home: 'Team 1', Away: 'Team 2' },
    { Number: 3, Location: 'Place 2', Home: 'Team 3', Away: 'Team 4' },
    { Number: 4, Location: 'Place 2', Home: 'Team 1', Away: 'Team 2' },
    { Number: 4, Location: 'Place 2', Home: 'Team 3', Away: 'Team 4' }
]

每次更改时我想显示它的值，但不会在重复时显示它。

Answer 1

如果我了解您要求的内容，则可以使用ng-show仅显示当前位置不等于之前位置的行。

<tr ng-show="game.Location != model.Games[$index-1].Location">

Plunker demo

Answer 2

Working Plunker Here

您可以为分组创建过滤器。每次迭代都会检查第一次是否遇到Location，如果是，则会向游戏对象添加IsFirst:true属性。

 app.filter('groupByLocation', function() {

     return function (input) {
       var groupedGames = [];  
       var location = null;
       var isFirst = false;
       angular.forEach(input, function(game) {
          if (location == null) {
              isFirst = true;
              location = game.Location;
          }
          else {
            if (location != game.Location) {
              isFirst = true;
              location = game.Location;
            }else {
              isFirst = false;
            }
          }
          if (isFirst)
              angular.extend(game, { IsFirst: true });
          groupedGames.push(game);


      });
       return groupedGames;           
   };
 });

然后，您可以使用ng-show和过滤器仅在group.IsFirst为true时显示该行：

     <table data-ng-repeat="group in games | groupByLocation">
          <tbody>
              <tr ng-show="group.IsFirst"><td colspan="3">{{group.Location}}</td></tr>
              <tr>
                  <td>{{group.Number}}</td>
                  <td>{{group.Away}}</td>
                  <td>{{group.Home}}</td>
              </tr>
          </tbody>
      </table>

每次在转发器中更改时显示一个值

2 个答案: