ng-repeat：如何检测列*中的值何时更改*（又名列中断）

Question

给定使用ng-repeat显示的项目列表我希望每当列中的值更改时显示额外的内容，例如：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.cards = [
        {suit: 'Hearts',   value: 7},
        {suit: 'Clubs',    value: 7},
        {suit: 'Spades',   value: 7},
        {suit: 'Diamonds', value: 7},
        {suit: 'Hearts',   value: 8},
        {suit: 'Clubs',    value: 8},
        {suit: 'Spades',   value: 8},
        {suit: 'Diamonds', value: 8},
        {suit: 'Hearts',   value: 9},
        {suit: 'Clubs',    value: 9},
        {suit: 'Spades',   value: 9},
        {suit: 'Diamonds', value: 9} ];

    $scope.myValueFunction = function(card) {
        return [card.suit, card.value];
    };
}​

我需要以下结果：

The Clubs
7
8
9
The Diamonds
7
8
9
The Hearts
7
8
9
The Spades
7
8
9

我更喜欢这样的HTML：

<div ng-controller="MyCtrl">
    <div ng-repeat="card in cards | orderBy:myValueFunction">
        <div break-on-column="card.suit">The {{card.suit}}</div> 
        <div>{{card.value}}</div>
    </div>
</div>

当然，真正的问题包含许多列（不仅仅是两个），几个中断列（例如：break-on-column =“col1，col2，col3”），中断列不固定（即。用户在运行时选择。）

Answer 1

我会按照显示数据的方式对数组进行预处理。我不认为ng-repeat指令能够做到这一点。

另一个想法可能是编写一个自定义函数来显示如下信息：

<强> HTML

<div ng-controller="MyCtrl">
    <div ng-repeat="card in cards | orderBy:myValueFunction">
        <data-displaying></data-displaying>
    </div>
</div>

<强>指令

.directive('dataDisplaying', function() {
    return {
        templateUrl: 'partials/dataTemplate.html',
        link: function(scope, element, attrs) {
            // Data transformation goes in here
        }
    }
})

然后，您可以处理指令中的数据，并在设置正确时仅输出套装（或其他任何内容）。例如。暂时存放西装，并在西装不同时输出。

Answer 2

我会像this

那样使用ng-hide

function MyCtrl($scope) {

  //...

  $scope.breakProperties = [ 'suit' ];

  $scope.breakOn = function(property, index, cards, breakProperties) {
    var previousIndex = index - 1;
    var propertyPresent = false;
    if (previousIndex >= 0) {
      var card = cards[index];
      var previousCard = cards[previousIndex];
      for ( var i = 0; i < breakProperties.length; i += 1) {
        if (breakProperties[i] === property) {
          propertyPresent = true;
        }
      }
      //if the property is not on the list always show regardless of value
      if (!propertyPresent) {
        return false;
      }

      //if the property is different
      if (previousCard[property] !== card[property]) {
        return false;
      }
    }
    //if it's the first always show
    else {
      return false;
    }
    return true;
  };
}

模板

<div ng-controller="MyCtrl"
  ng-init="orderedCards = cards | orderBy:myValueFunction">

  <button ng-click="breakProperties = [ 'suit' ]">Break on suit</button>
  <button ng-click="breakProperties = [ 'points' ]">Break on points</button>
  <button ng-click="breakProperties = [ 'suit', 'points' ]">Break on
    suit and points</button>

  <div>{{breakProperties}}</div>

  <div ng-repeat="card in orderedCards"
    style="border: 1px solid; margin-bottom: 1px;">
    <div ng-hide="breakOn('suit', $index, orderedCards, breakProperties)">Suit
      {{card.suit}}</div>
    <div>Value {{card.value}}</div>
    <div ng-hide="breakOn('points', $index, orderedCards, breakProperties)">Points
      {{card.points}}</div>
  </div>
</div>