使用角度JS ng-repeat动态应用rowspan

时间:2016-12-06 06:44:23

标签: angularjs

我希望将要分组的行中的重复值显示为一个,并在包含重复值的特定行上应用rowspan。我不确定我的问题是否清楚。看看下表

enter image description here

我希望jason应该只显示一次,而rowspan应该是两次。在这个特定的例子中,如果有任何重复,我应该能够将它应用于更多行。我在这里看到了几个类似的问题,但它们不符合我的要求提前谢谢:)

2 个答案:

答案 0 :(得分:0)

这会有帮助吗? - https://plnkr.co/edit/vNq9l0ZcSzGWEipGeWId?p=preview

angular.module("SampleApp", [])
  .controller('SampleController',function() {

    var self = this;

    self.trainingDetails = [{
      trainer: 'Geetha',
      feedbacks: [4.4]
    }, {
      trainer: 'Jason',
      feedbacks: [4.0, 4.7]
    }];
  });

<body data-ng-controller="SampleController as ctrl">

  <table>
    <tr>
      <th>Trainer</th>
      <th>Avg Feedback</th>
    </tr>
    <tr data-ng-repeat="training in ctrl.trainingDetails">
      <td rowspan={{training.feedbacks.length}}>{{::training.trainer}}</td>
      <td><div data-ng-repeat="feedback in training.feedbacks">{{::feedback}}</div></td>
    </tr>

  </table>

</body>

答案 1 :(得分:0)

我尝试了一个简单的解决方案我不知道它是否准确有效或不使用 ng-style

OttMatchSolo.Matched

给了我以下结果。如果我错了,请纠正我:| enter image description here

发布数据样本

<td ng-style="{ 'border-top' : {{x.NAME == consfeed[$index-1].NAME}} ? '1px solid white':'','border-bottom' : {{x.NAME == consfeed[$index+1].NAME}} ? '1px solid white':''}">{{ x.NAME == consfeed[$index-1].NAME ? "" : x.NAME }}</td>