2017-02-12 61 views
2

https://jsfiddle.net/gdrkftwm/纳克重复在Angular.js

enter image description here

我使用的对象的Json生成表产生一个额外的TD。我的问题是,我有一个额外的TD,我不知道,因为正在生成,但我要像图像的结构:

enter image description here

 <div ng-app="app"> 
     <div ng-controller="Controller"> 
      <table border='1'> 
       <tr> 
       <th rowspan="2">Tipo de Contenido</th> 
       <th colspan="{{aTipoUsuarios.length}}">Tipo de Usuarios</th> 
       </tr> 
       <tr> 
       <td ng-repeat="usu in aTipoUsuarios">{{usu}}<td> 
       </tr> 

      </table> 

     </div> 
    </div> 

    angular.module('app', []) 
     .controller('Controller', function ($scope) { 

    $scope.aRoles= 
    [ 
     { 
     "tipo_contenido": "articulos", 
     "tipo_usuario":{ 
      "administrador": 
      {"escritura":true, "lectura":true, "eliminacion":true}, 
      "reportante": 
      {"escritura":true, "lectura":true, "eliminacion":true} 
     }  
     }, 
     { 
     "tipo_contenido": "informacion", 
     "tipo_usuario":{ 
      "administrador": 
      {"escritura":true, "lectura":true, "eliminacion":true}, 
      "reportante": 
      {"escritura":true, "lectura":true, "eliminacion":true} 
     }  
     }, 
    ]   
    $scope.aTipoUsuarios=Object.keys($scope.aRoles[0].tipo_usuario); 
    console.log($scope.aTipoUsuarios) 


    }); 

回答

1

应该是typo

变化

<td ng-repeat="usu in aTipoUsuarios">{{usu}}<td> 

<td ng-repeat="usu in aTipoUsuarios">{{usu}}</td> 

DEMO

angular.module('app', []) 
 
.controller('Controller', function ($scope) { 
 
$scope.aRoles= 
 
     [ 
 
      { 
 
      "tipo_contenido": "articulos", 
 
      "tipo_usuario":{ 
 
       "administrador": 
 
       {"escritura":true, "lectura":true, "eliminacion":true}, 
 
       "reportante": 
 
       {"escritura":true, "lectura":true, "eliminacion":true} 
 
      }  
 
      }, 
 
      { 
 
      "tipo_contenido": "informacion", 
 
      "tipo_usuario":{ 
 
       "administrador": 
 
       {"escritura":true, "lectura":true, "eliminacion":true}, 
 
       "reportante": 
 
       {"escritura":true, "lectura":true, "eliminacion":true} 
 
      }  
 
      }, 
 
     ];    $scope.aTipoUsuarios=Object.keys($scope.aRoles[0].tipo_usuario); 
 
     console.log($scope.aTipoUsuarios) 
 
});
!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
</head> 
 
<body ng-app="app">  
 
     <div ng-controller="Controller"> 
 
      <table border='1'> 
 
       <tr> 
 
       <th rowspan="2">Tipo de Contenido</th> 
 
       <th colspan="{{aTipoUsuarios.length}}">Tipo de Usuarios</th> 
 
       </tr> 
 
       <tr> 
 
       <td ng-repeat="usu in aTipoUsuarios">{{usu}}</td> 
 
       </tr> 
 
      </table> 
 
     </div>  
 
    <script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script> 
 
    <script type="text/javascript " src="MainViewController.js "></script> 
 
</body> 
 
</html>

1

与NG-重复相关的td标签未关闭。这里是修复:

<div ng-app="app"> 
    <div ng-controller="Controller"> 
     <table border='1'> 
      <tr> 
      <th rowspan="2">Tipo de Contenido</th> 
      <th colspan="{{aTipoUsuarios.length}}">Tipo de Usuarios</th> 
      </tr> 
      <tr> 
      <td ng-repeat="usu in aTipoUsuarios">{{usu}}</td> <!-- close this tag --> 
      </tr> 

     </table> 

    </div> 
</div> 

https://jsfiddle.net/fzwr0hf0/1/

1

一切都很好与你的角码。问题在于ng-repeat html。

所以,请更改

From : <td ng-repeat="usu in aTipoUsuarios">{{usu}}<td> 
To : <td ng-repeat="usu in aTipoUsuarios">{{usu}}</td> 

您可以点击此处查看 https://jsfiddle.net/gdrkftwm/2/