嵌套的ng-repeat在angularjs中的表数据。

I have a scenario where I need to display a set of data in table using nested ng-repeat. Below is the data set :

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

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

so for each siteRegion I have multiple Site and multiple Regions, that means I have to use three ng-repeats.

对于每个siteRegion，我有多个站点和多个区域，这意味着我必须使用三个ng重复。

I tried using ng-repeat-start and ng-repeat-end but since I am using xhtml 'ng-repeat-end' is expecting '=' character after it.

我尝试使用ng-repeat-start和ng-repeat-end，但由于我使用的是xhtml 'ng-repeat-end'，所以期望'='字符。

Table Code :

表的代码:

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

Pushing the data via:

把数据通过:

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});
                        }

1 个解决方案

#1

As the following example proves, if you are just worried that XHTML does not allow no value attributes like ng-repeat-end you can fix that setting the no value attribute to its own name.

正如下面的示例所证明的那样，如果您只是担心XHTML不允许没有像ng-repeat-end这样的值属性，那么您就可以修改该设置，将没有值属性设置为它自己的名称。

In this case ng-repeat-end="ng-repeat-end"

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

(Notice: the sample below is not written to be a full XHTML compliant sample, it just serves to prove that Angularjs will just ignore the ng-repeat-end attribute value)

(注意:下面的示例并不是完全符合XHTML的示例，它只是用来证明Angularjs将忽略ng-repeat-end属性值)

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" }
  ];
  
});

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

#1