Question

如果你看一下http://plnkr.co/edit/evBFK07EAoJAkHLZSV2g?p=preview，你会看到在index.html中使用ng-repeat。

<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

最简单的方法是让数据结构更容易绑定到视图中，这样你就可以通过一些嵌套的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)
  }))

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

1 个答案: