使用角度JS ng-repeat動態應用rowspan

我想顯示行中的重複值以將其分成一個，並對包含重複值的特定行應用rowspan。我不確定我的問題是否清楚。看看下面的表格使用角度JS ng-repeat動態應用rowspan

我想賈森應顯示一次一次，行跨度應該是兩個。在這個特殊的例子中，我應該能夠應用它進一步行，如果有任何重複碰巧there.I在這裏看到了一些類似的問題，但他們不符合我的要求預先感謝:)

2016-12-06 Jason

您是否嘗試過的東西？ – Kenny

@Kenny我試過了，但它給出奇怪的結果，是你沒有發佈任何代碼:(你會給我一些想法，我怎麼能框架它？ – Jason

我已經嘗試了簡單的解決方案，我不知道它是否準確，高效或不使用NG風格

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

這給了我下面的結果。如果我錯了，請糾正我：|

發佈的數據樣本

[ 
    { 
     "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":"Geetha Kondapalli", 
     "NAME":"Geetha Kondapalli", 
     "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":"Geetha Kondapalli", 
     "NAME":"Geetha Kondapalli", 
     "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 Bangaram", 
     "NAME":"Jason Bangaram", 
     "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 Bangaram", 
     "NAME":"Jason Bangaram", 
     "5":"7", 
     "signoff_rating":"7" 
    } 
]

來源

2016-12-07 05:11:04 Jason

You可能要發佈另一個涉及JSON數據的問題，以及如何從MySQL（或任何數據庫）收集數據正在使用）以及您擁有的任何服務器端設置 - 大多數JSON響應看起來不像這樣。（即在命名列和非命名列之間不重複數據） – Jhecht

@Jhecht它解決了我的問題，數據在非命名列和命名列中是否正確？ – Jason

這會有幫助嗎？ - 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>

來源

2016-12-06 07:06:35 Developer

但我的JSON不像你定義的那個**教練：'傑森' ，反饋：[4.0，4.7] **這些是兩個單獨的行到數據庫：| – Jason

你可以隨時在客戶端重構你的json來渲染它，我會建議重構JSON而不是使UI邏輯複雜 – Developer

我會試着讓你知道 – Jason

使用角度JS ng-repeat動態應用rowspan

回答

相關問題