Javascript 分组ng repeat和修改DOM EXTER指令

我不确定如何描述我所面临的问题，甚至不确定这是否是一个问题。我想我很难理解角指令是如何工作的。欢迎就最佳实践提供任何建议和/或意见

我在控制器的$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>
....

生日：1953年9月20日
姓名：鲍勃
蛋糕：香草
姓名：迈克尔
蛋糕：巧克力
姓名：戴夫
蛋糕：巧克力
生日：1977年4月24日
姓名：主任
蛋糕：巧克力
....

我可以达到接近这个目标

然而，我最终得到了一个稍微不同的DOM结构，这是我不想要的

1953年9月20日
姓名：鲍勃
蛋糕：香草
1953年9月20日
姓名：迈克尔
蛋糕：巧克力
1977年4月24日
姓名：主任
蛋糕：巧克力

因此，我的问题是：

我对这个问题的想法正确吗？我是否应该修改我的数据结构，将其按日期分组，然后在每个日期重复

如果有一种方法可以用我现有的数据结构实现这一点，我是否需要在birthday boy/ng repeat指令之外修改DOM

有没有一种方法可以将ng repeat指令包装成自定义的东西？我已经开始研究编译函数，但是，只是不确定

---

谢谢

我会在控制器中按日期分组，然后在新的scope属性上重复。下面是我为一个类似的“分组讨论”问题写的。您应该能够根据您的代码对其进行调整。我使用了orderByFilter

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

---

但是，您可能需要使用

日期过滤器

或任何JavaScript代码来按dob排序。

遵守KISS原则并将其分组到控制器中（在

生日

使用$watch表达式）。谢谢@stewie。有道理，出于某种原因，我想我认为最好执行一个指令来处理它。最后，这可能是更快/更便宜的解决方案。谢谢@Mark，我想这是有道理的，因为Stewie在上面的评论中保持简单、愚蠢。我认为修改数据结构比在我的指令中有一组逻辑并让它修改DOM等更便宜。如果使用类似于fiddle的东西，最终会得到更“糟糕”的DOM结构。当有400个左右的项目时，修改每次添加/删除的数据结构可能会非常慢。。我这里也有同样的问题我不敢相信做这么简单的事会让人感到很痛苦。。

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