1

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>

もちろん、実際の問題には多くの列 (2 つだけでなく)、いくつかのブレーク列 (例: break-on-column="col1,col2,col3") が含まれており、ブレーク列は固定されていません (つまり、実行時のユーザー)。

4

2 に答える 2

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 に答える
0

必要なデータを表示する方法で配列を前処理します。ng-repeat ディレクティブがそのようなことができるとは思いません。

もう 1 つのアイデアは、次のような情報を表示するためのカスタム関数を作成することです。

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 に答える