angularjs如何在HTML中嵌套循环

首先我们来描述一个案例，老板有一天对你说，公司订单系统上有一些订单明细需要展示，订单中有普通产品，有促销产品，要你按照如下的格式进行展示：

拿到需求以后，你就想实现的思路，平时都是从后台订单明细集合，然后直接用ng-repeat循环商品就行了。现在老板的需求要区分普通商品和促销商品，我是不是要后台分别获取，然后传给前台一个普通商品集合，一个促销商品集合？

首先这个思路是一种解决方法，但是不推荐，因为在后台分别获取2个集合，要多遍历一边订单明细，前台也会多写一些重复代码，并不划算。可能你觉得没几行重复的代码，但是如果前端要显示的内容很多，就不止这几行了。

那么怎么不用多进行代码的重复那？很简单，这就用到angular的嵌套循环了，首先说一下思路：后台也得封装两个集合，一个集合就是商品类型集合；一个集合是所有订单商品集合，如下所示：

前台得到这2个集合以后，就开始进行嵌套循环即可，产品类型集合是外循环，产品明细是内循环：

通过上面的两种方式的对比，你应该能感觉到哪种方式比较理想了吧，小编推荐第二种方式，不知道你学会了吗？