AngularJS ng-repeat-start ng-repeat-end with table and rowspan

我在使用動態rowspan創建動態表時遇到了問題。我的json是一個對象數組。元素對象也是數組。元素數組應該作爲動態rowspan的否。我有一個JSON，如：AngularJS ng-repeat-start ng-repeat-end with table and rowspan

{ 
    "roleTypes": [ 
    { 
     "roleType": { 
     "name": "SOA Role" 
     }, 
     "rates": [ 
     { 
      "rateType": { 
      "name": "new Rate" 
      }, 
      "hourlyRate": { 
      "value": 1222 
      }, 
      "internalRate": { 
      "value": 433 
      } 
     }, 
     { 
      "rateType": { 
      "name": "myRate" 
      }, 
      "hourlyRate": { 
      "value": 1350 
      }, 
      "internalRate": { 
      "value": 1650 
      } 
     } 
     ] 
    }, 
    { 
     "roleType": { 
     "name": "SOA Role" 
     }, 
     "rates": [ 
     { 
      "rateType": { 
      "name": "new Rate" 
      }, 
      "hourlyRate": { 
      "value": 1222 
      }, 
      "internalRate": { 
      "value": 433 
      } 
     }, 
     { 
      "rateType": { 
      "name": "myRate" 
      }, 
      "hourlyRate": { 
      "value": 1350 
      }, 
      "internalRate": { 
      "value": 1650 
      } 
     } 
     ] 
    }, 
    { 
     "roleType": { 
     "name": "AngularJs Developer" 
     } 
    } 
    ] 
}

如果我想使用NG-重複啓動和NG-重複結束，並進行表結構像下面

：

roleType------  | rateType-----hourlyRate--------internalRate 
--------------------------------------------------------------------------- 
        | new Rate  1222    433 
        --------------------------------------------------- 
SOA Role   | myRate  1350    1650 
--------------------------------------------------------------------------- 
        | new Rate  1222     433 
        --------------------------------------------------- 
AngularJs Developer |myRate   1350     1650 
---------------------------------------------------------------------------

我掙扎着爬動態的rowspan。請檢查是否有人可以幫忙。

來源

2016-08-19 Rakesh Lochan Sarma

這是無效的JSON。你可以請張貼正確的嗎？ –

什麼潘卡提的是正確的，但我認爲你需要在rowspan更加動態的表格。你可以不喜歡如下面的例子：

var app = angular.module("sa", []); 
 

 
app.controller("FooController", function($scope) { 
 

 
    $scope.data = { 
 
    "roleTypes": [{ 
 
     "roleType": { 
 
     "name": "SOA Role" 
 
     }, 
 
     "rates": [{ 
 
     "rateType": { 
 
      "name": "new Rate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 1222 
 
     }, 
 
     "internalRate": { 
 
      "value": 433 
 
     } 
 
     }, { 
 
     "rateType": { 
 
      "name": "myRate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 1350 
 
     }, 
 
     "internalRate": { 
 
      "value": 1650 
 
     } 
 
     }] 
 
    }, { 
 
     "roleType": { 
 
     "name": "AngularJs Developer" 
 
     }, 
 
     "rates": [{ 
 
     "rateType": { 
 
      "name": "new Rate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 123 
 
     }, 
 
     "internalRate": { 
 
      "value": 1431 
 
     } 
 
     }, { 
 
     "rateType": { 
 
      "name": "myRate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 443 
 
     }, 
 
     "internalRate": { 
 
      "value": 1930 
 
     } 
 
     }, { 
 
     "rateType": { 
 
      "name": "otherRate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 343 
 
     }, 
 
     "internalRate": { 
 
      "value": 2000 
 
     } 
 
     }] 
 
    }] 
 
    }; 
 
});

td[rowspan] { 
 
    vertical-align: middle !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
<div ng-app="sa" ng-controller="FooController"> 
 
    <table class="table table-bordered"> 
 
    <thead> 
 
     <tr> 
 
     <th>roleType</th> 
 
     <th>rateType</th> 
 
     <th>hourlyRate</th> 
 
     <th>internalRate</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr ng-repeat-start="role in data.roleTypes"> 
 
     <td rowspan="{{role.rates.length}}">{{role.roleType.name}}</td> 
 
     <!-- Display the first rate in the same "tr" --> 
 
     <td>{{role.rates[0].rateType.name}}</td> 
 
     <td>{{role.rates[0].hourlyRate.value}}</td> 
 
     <td>{{role.rates[0].internalRate.value}}</td> 
 
     </tr> 
 
     
 
     <!-- Now display the other rates in different "tr" excluding first --> 
 
     <!-- You can also make a subarray from here excluding the 1st rate --> 
 
     <tr ng-repeat="rate in role.rates" ng-if="!$first" ng-repeat-end> 
 
     <td> 
 
      {{rate.rateType.name}} 
 
     </td> 
 
     <td> 
 
      {{rate.hourlyRate.value}} 
 
     </td> 
 
     <td> 
 
      {{rate.internalRate.value}} 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2016-08-19 12:32:17

真棒@shashank ...它的作品謝謝:) –

您可以通過有做類似下面ng-repeat超過tbody

<table> 
    <tbody ng-repeat="role in roleTypes.roleTypes"> 
    <tr ng-repeat="rate in role.rates"> 
     <td ng-if="$first" rowspan="2">{{role.roleType.name}}</td> 
     <td>{{rate.rateType.name}}</td> 
     <td>{{rate.hourlyRate.value}}</td> 
     <td>{{rate.internalRate.value}}</td> 
     <tr> 
    </tbody> 
</table>

Plunkr

來源

2016-08-19 11:57:22

AngularJS ng-repeat-start ng-repeat-end with table and rowspan

回答

相關問題