3

私が抱えている問題を説明する方法が正確にわかりません。Angular ディレクティブがどのように機能するかについて頭を悩ませていると思います。ベスト プラクティスに関するアドバイスや意見を歓迎します。

コントローラーの $scope にオブジェクトの単純な配列があります。

$scope.birthdays = [
      { name: "bob", dob:moment("09/20/1953"), cake: "vanilla"},
      { name: "michael", dob:moment("09/20/1953"), cake: "chocolate" },
      { name: "dave", dob:moment("09/20/1953"), cake: "chocolate" },
      { name: "chief", dob:moment("04/24/1977"), cake: "chocolate" },
      { name: "jerry", dob:moment("04/24/1977"), cake: "red velvet" },
      { name: "jerkface", dob:moment("04/24/1977"), cake: "i hate cake" },
      { name: "doug", dob:moment("05/10/1994"), cake: "marble" },
      { name: "jeff", dob:moment("05/10/1994"), cake: "vanilla" }
];

このデータ モデルから DOM 構造を作成したいとします。

<h1>Birthday: 09/20/1953</h1>
<div class="birthday">
   <h2>Name: bob</h2>
   <h3>Cake: vanilla</h3>
</div>
<div class="birthday">
   <h2>Name: michael</h2>
   <h3>Cake: chocolate</h3>
</div>
<div class="birthday">
   <h2>Name: dave</h2>
   <h3>Cake: chocolate</h3>
</div>
<h1>Birthday: 04/24/1977</h1>
<div class="birthday">
   <h2>Name: chief</h2>
   <h3>Cake: chocolate</h3>
</div>
....

この plunker でこれに近いものを実現できます。

しかし、そこでは、私が望んでいない、わずかに異なる DOM 構造になってしまいます。

<div ng-repeat="birthday in birthdays" birthday-boy="">
    <h3 ng-show="!birthdays[$index-1].dob.isSame(birthday.dob)" class="ng-binding" style="">
        September 20th, 1953
    </h3>
    <div class="ng-binding">
        Name: bob
    </div>
    <div class="ng-binding">
        Cake: vanilla
    </div>
</div>
<div ng-repeat="birthday in birthdays" birthday-boy="">
    <h3 ng-show="!birthdays[$index-1].dob.isSame(birthday.dob)" class="ng-binding" style="display: none;">
        September 20th, 1953
    </h3>
    <div class="ng-binding">
        Name: michael
    </div>
    <div class="ng-binding">
        Cake: chocolate
    </div>
</div>
<div ng-repeat="birthday in birthdays" birthday-boy="">
    <h3 ng-show="!birthdays[$index-1].dob.isSame(birthday.dob)" class="ng-binding" style="">
        April 24th, 1977
    </h3>
    <div class="ng-binding">
        Name: chief
    </div>
    <div class="ng-binding">
        Cake: chocolate
    </div>
</div>

だから、私の質問は次のとおりです。

  1. この問題について正しく考えていますか？データ構造を変更して日付ごとにグループ化し、個々の日付ごとに ng-repeat する必要がありますか?
  2. 既存のデータ構造でこれを行う方法がある場合、birth-boy / ng-repeat ディレクティブの外側で DOM を変更する必要がありますか?
  3. ng-repeat ディレクティブをカスタムなものにラップする方法はありますか - コンパイル機能を調べ始めましたが、よくわかりません...

ありがとう！

4

1 に答える 1

2

I would group by dates in your controller, then ng-repeat over that new scope property. Here is a fiddle I wrote for a similar "group by" question. You should be able to adapt it for your code. I used the orderByFilter

$scope.sortedFriends = orderByFilter($scope.friends, '+age');

but you'll likely need to use the dateFilter or whatever JavaScript code you might have around to sort by the dob stuff.

于 2013-03-18T14:19:56.853 に答える