每次在中繼器中更改時顯示一個值

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

您可以創建分組過濾器。每次迭代都會檢查第一次是否遇到位置，如果是，則會將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-展示和你的過濾器，只顯示一行時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>