CODEWITHSUNDEEP
angularjs
Jason
Jason

Reputation: 123

Applying rowspan dynamically using angular JS ng-repeat

I wanted to display the duplicate values in the rows to be clubbed into one and apply rowspan on that particular rows containing duplicate values. i am not sure whether i am clear in my question. take a look at the below table

[![enter image description here][1]][1]

[1]:

I wanted that jason should be displayed once once and the rowspan should be two. in this particular example, and i should be able to apply it for further rows also if any duplications happen to be there.I saw a couple of similar questions in here but they do not fit to my requirement Thanks in advance :)

Upvotes: 0

Views: 947

Answers (2)

Jason
Jason

Reputation: 123

I have tried a simple solution i dont know whether it is accurate and efficient or not using ng-style

<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>

which gave me the following result. Please correct me if i am wrong :| [![enter image description here][1]][1]

posting the data sample

    [  
   {  
      "0":"5.0",
      "feedback":"5.0",
      "1":"5",
      "COUNT(fc.trainee_id)":"5",
      "2":"1",
      "sessions":"1",
      "3":"UET_Q4_18_EBK_FINFUNC_2017",
      "training_id":"UET_Q4_18_EBK_FINFUNC_2017",
      "4":"Giridhar Mohan Bhat",
      "NAME":"Giridhar Mohan Bhat",
      "5":null,
      "signoff_rating":null
   },
   {  
      "0":"4.4",
      "feedback":"4.4",
      "1":"5",
      "COUNT(fc.trainee_id)":"5",
      "2":"1",
      "sessions":"1",
      "3":"UET_Q3_10_HNB_FINTECH_2016",
      "training_id":"UET_Q3_10_HNB_FINTECH_2016",
      "4":"GGGGG",
      "NAME":"GGGGG",
      "5":null,
      "signoff_rating":null
   },
   {  
      "0":"4.7",
      "feedback":"4.7",
      "1":"10",
      "COUNT(fc.trainee_id)":"10",
      "2":"1",
      "sessions":"1",
      "3":"UET_Q3_5_SIB_FINTECH_2016",
      "training_id":"UET_Q3_5_SIB_FINTECH_2016",
      "4":"GGGG",
      "NAME":"GGGGG",
      "5":"7",
      "signoff_rating":"7"
   },
   {  
      "0":"3.9",
      "feedback":"3.9",
      "1":"10",
      "COUNT(fc.trainee_id)":"10",
      "2":"1",
      "sessions":"1",
      "3":"UET_Q3_5_SIB_FINTECH_2016",
      "training_id":"UET_Q3_5_SIB_FINTECH_2016",
      "4":"Abhishek",
      "NAME":"Abhishek",
      "5":"7",
      "signoff_rating":"7"
   },
   {  
      "0":"4.0",
      "feedback":"4.0",
      "1":"5",
      "COUNT(fc.trainee_id)":"5",
      "2":"1",
      "sessions":"1",
      "3":"UET_Q3_11_HNB_FINTECH_2016",
      "training_id":"UET_Q3_11_HNB_FINTECH_2016",
      "4":"Jason",
      "NAME":"Jason ",
      "5":null,
      "signoff_rating":null
   },
   {  
      "0":"4.8",
      "feedback":"4.8",
      "1":"20",
      "COUNT(fc.trainee_id)":"20",
      "2":"2",
      "sessions":"2",
      "3":"UET_Q3_5_SIB_FINTECH_2016",
      "training_id":"UET_Q3_5_SIB_FINTECH_2016",
      "4":"Jason",
      "NAME":"Jason ",
      "5":"7",
      "signoff_rating":"7"
   }
]

Upvotes: 0

Developer
Developer

Reputation: 6440

Would this help? - 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>

Upvotes: 0

Related Questions