angularjs - 使用 ng-repeat-start 重复多个 元素

Question

如果你看这个笨蛋，http://plnkr.co/edit/evBFK07EAoJAkHLZSV2g?p=preview , 你会看到 ng-repeat 的使用在 index.html 中。

<table ng-controller="GadgetIconsCtrl" >
  <tr ng-repeat="widget in widgetSubset"  >
    <td>
      <div class="image-clicked" ng-click="widgetClick($event, widget)" 
           ng-class="{clicked: widget.clicked}">
        <img ng-src="{{widget.initImage}}" 
             title="{{widget.title}}" width="64" height="64">{{widget.title}}
      </div>
    </td>
  </tr>
</table>

工作正常，但是，我想实现 ng-repeat-start以某种方式显示两个独特的 <td>每个 <tr> 的元素.

它目前正在做的是按如下方式显示一个。请点击下面的 RUN SNIPPET 查看输出:

<table class="gadgetsTable">
  <tbody>
    <!-- ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="http://lorempixel.com/10/10/" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/column_stacked.png" title="Column Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/column_line.png" title="Column Line Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column Line Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="http://lorempixel.com/10/10/" title="Column 100% Stacked" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column 100% Stacked
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
  </tbody>
</table>

我希望输出看起来更像这样，每个包含三个元素:

<table class="gadgetsTable">
  <tbody>
    <!-- ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/bar.png" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/column_stacked.png" title="Column Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column Chart
      </td>
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/bar.png" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->

    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/bar.png" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/column_stacked.png" title="Column Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column Chart
      </td>
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/bar.png" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
  </tbody>
</table>

如何使用 ng-repeat-start 实现此目的？ ？

谢谢，鲍勃

Answer 1

最简单的方法是让数据结构更容易绑定(bind)到 View 中，这样您就可以通过一些嵌套的 ng-repeats 获得您想要的内容。

http://plnkr.co/edit/qH2PdnoAPGZkJruahSWn?p=preview

    <tr ng-repeat="set in setOfSets">
      <td ng-repeat="widget in set">
        <div class="image-clicked" ng-click="widgetClick($event, widget)" ng-class="{clicked: widget.clicked}">
          <img ng-src="{{widget.initImage}}" title="{{widget.title}}" width="64" height="64" />
          {{widget.title}}
        </div>
      </td>
    </tr>

我使用 lodash 来简化重做分组

  $scope.setOfSets = _.toArray(_.groupBy($scope.widgetSubset, function(item, index){
    return Math.floor(index/3)
  }))