ng-repeat在Angular.js

时间:2017-02-12 06:58:04

标签: javascript angularjs

https://jsfiddle.net/gdrkftwm/

enter image description here

我正在使用对象Json生成一个表。我的问题是我有一个额外的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)


   });

3 个答案:

答案 0 :(得分:1)

与ng-repeat相关联的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 :(得分:1)

应该是 docker run -v $PWD/namevideo.mp4:/tmp/namevideo.mp4 -p 8554:8554 test -f /tmp/namevideo.mp4 -i rtsp://:8554/test

更改

发件人

typo

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

<强>样本

&#13;
&#13;
<td ng-repeat="usu in aTipoUsuarios">{{usu}}</td>
&#13;
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)
});
&#13;
&#13;
&#13;

答案 2 :(得分: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/