1

Given a list of items displayed with ng-repeat I want to display extra stuff whenever a value in a column changes, eg:

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];
    };
}​

I need the following result:

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

I would prefer to have a HTML something like that:

<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>

Of course, the real problem contains many columns (not just two), several break columns (eg: break-on-column="col1,col2,col3"), the break columns are not fixed (ie. the are chosen by the user at runtime).

4

2 回答 2

0

我会按照数组显示您需要的数据的方式对数组进行预处理。我不认为 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
        }
    }
})

然后您可以处理指令中的数据，并且仅在设置正确时才输出西装（或其他任何东西）。例如，临时存储西装，并在西装不同时将其输出。

于 2012-11-22T14:48:15.520 回答
0

我会像这样使用 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>
于 2012-11-22T19:23:58.647 回答