AngularJs 学习之 ng-repeat-start,ng-repeat-end 指令

AngularJs 学习之 ng-repeat-start,ng-repeat-end 指令

ng-repeat 指令：循环输出数组或者对象内容到 html

• 
  
  
  	
  	
  	
  	
  	
  
  
  	
  
  		
  
  			
  
  				
  
  					
  姓名
  					
  介绍
  				
  			
  			
  
  				
  
  					
  {{item.name}}
  					
  {{item.content}}
  				
  			
  		
  	
  	
  
  
  

• 页面： 一条数据占一行，如果分行显示则不容易实现。

• 

ng-repeat-start ng-repeat-end 指令：将数组或对象的一条数据分行显示。

• 
  
  
  	
  	
  	
  	
  	
  
  
  	
  
  		
  
  			
  
  				
  
  					
  姓名
  					
  {{item.name}}
  				
  				
  
  					
  
  					
  {{item.content}}
  				
  			
  		
  	
  	
  
  
  

• 页面：实现分行显示一条数据。

• 

• 参数结构：

• [
      {
          "layerId": "5569",
          "layerName": "layer0",
          "experiments": [
              {
                  "layerId": 5569,
                  "layerName": "layer0",
                  "experimentId": 15027,
                  "experimentName": "exp123",
                  "pVal": "a",
                  "pName": "p1"
              },
              {
                  "layerId": 5569,
                  "layerName": "layer0",
                  "experimentId": 15028,
                  "experimentName": "exp124",
                  "pVal": "a",
                  "pName": "p1"
              }
          ]
      },
      {
          "layerId": "5621",
          "layerName": "layer1",
          "experiments": [
              {
                  "layerId": 5621,
                  "layerName": "layer1",
                  "experimentId": 15171,
                  "experimentName": "exp002",
                  "pVal": "a",
                  "pName": "p1"
              }
          ]
      }
  ]
  

•  table.table.table-striped.table-hover.table-grid.table-bordered
              thead
                tr
                  th 分层
                  th 分桶
                  th 参数值
              tbody
                tr(ng-repeat-start="layer0 in result.data track by $index")
                  td(rowspan="{{layer0.experiments.length}}") {{layer0.layerName}}\#{{layer0.layerId}}
                  td {{layer0.experiments[0].experimentName}}\#{{layer0.experiments[0].experimentId}}
                  td {{layer0.experiments[0].pName}}={{layer0.experiments[0].pVal}}
                tr(ng-repeat-end ng-repeat="expt in layer0.experiments track by $index" ng-if="$index!=0")
                  td {{expt.experimentName}}\#{{expt.experimentId}}
                  td {{expt.pName}}={{expt.pVal}}
  

•