Question

我有一个场景，我需要使用嵌套的ng-repeat在表格中显示一组数据。以下是数据集：

var siteRegion = {'Site':[],'Region':[]};

所以对于每个siteRegion，我有多个Site和多个Regions，这意味着我必须使用三个ng-repeats。

我尝试过使用ng-repeat-start和ng-repeat-end，但由于我使用的是xhtml 'ng-repeat-end'，因此需要'='个字符。

表格代码：

<table>
    <thead>
        <tr>
         <th>Region</th>
         <th>Site</th>
       </tr>
    </thead> 
    <tbody ng-repeat="siteRegionInfo in siteRegion">
      <tr ng-repeat="siteList in siteRegionInfo.Site">
        <td ng-repeat-start="regionList in siteRegionInfo.Region">{{regionList.LABEL}}</td><td ng-repeat-end ></td>
        <td>{{siteList.LABEL}}</td>
     </tr>
   </tbody>

<table>
                            <thead>
                                <tr>
                                    <th>Region</th>
                                    <th>Site</th>
                                </tr>
                            </thead> 
                            <tbody> 
                            <tr ng-repeat-start="sitePFInfo in supplierList.SupplierInfo.SiteDependentPF" ng-init="sitePFIndex = $index">
                                <td class="col-md-2">{{sitePFInfo.Region.LABEL}}</td>
                                <td class="col-md-2">{{sitePFInfo.Site.LABEL}}</td>
                            </tr>
                            <tr ng-repeat-end="ng-repeat-end"></tr>
                            </tbody>
                        </table>

通过以下方式推送数据：

for(var j=0; j<selectedSite.length; j++){                       sitePF.Site.push({'VALUE':selectedSite[j],'LABEL':$scope.sites[findInJson($scope.sites, "VALUE",selectedSite[j])].LABEL});
                        }
for(var i=0; i<response.data.results.length; i++){
sitePF.Region.push({'VALUE':response.data.results[i].VALUE,'LABEL':response.data.results[i].LABEL});
                        }

Answer 1

如以下示例所示，如果您只是担心XHTML不允许使用ng-repeat-end之类的值属性，则可以修复将no value属性设置为其自己的名称。

在这种情况下ng-repeat-end="ng-repeat-end"

（注意：下面的示例不是完整的XHTML兼容样本，只是用来证明Angularjs会忽略ng-repeat-end属性值）

＆＃13;

angular.module("exampleApp", []).controller("exampleController", function($scope){
  $scope.exampleList = [
    {colA: "value 1.1", colB: "value 1.2", colC: "value 1.3" },
    {colA: "value 2.1", colB: "value 2.2", colC: "value 2.3" },
    {colA: "value 3.1", colB: "value 3.2", colC: "value 3.3" }
  ];
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<table ng-app="exampleApp" ng-controller="exampleController">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tr ng-repeat-start="item in exampleList">
    <td>{{item.colA}}</td>
    <td>{{item.colB}}</td>
    <td>{{item.colC}}</td>
  </tr >
  <tr ng-repeat-end="ng-repeat-end"></tr>
</table>

＆＃13;

对angularjs中的表数据进行嵌套的ng-repeat

1 个答案: