Question

我的问题是我想用ng-repeat完成行，但无论我怎么努力，我都无法动态完成它。我需要这件作品：

----------- I need use ng-repeat in this piece ng-repeat="usu in atypeUsers"
        <td >READ</td>
        <td >EDIT</td>
        <td >DELETE</td>
-------------------

我需要用ng-repeat生成这个，我必须让它变得动态。我的问题不知道放在哪里。如果我在tr中这样做，它就会失效。我一定不能修改我的json的结构。

 $scope.aRoles=
     [
       {
         "type_content": "articles", 
         "type_usuario":{
          "administrator":
           {"write":true, "read":true, "delete":true},
          "other":
           {"write":true, "read":true, "delete":true}
         }     
       },
       {
         "type_content": "papers", 
         "type_usuario":{
          "administrator":
           {"write":true, "read":true, "delete":true},
          "other":
           {"write":true, "read":true, "delete":true}
         }     
       },
     ]        
    $scope.atypeUsers=Object.keys($scope.aRoles[0].type_usuario);


   <table border='1'>
      <tr>
        <th rowspan="3">Type of content</th>
        <th colspan="{{atypeUsers.length * 3}}">
          Type of users
        </th>
      </tr>
      <tr>
       <td ng-repeat="usu in atypeUsers" colspan="3">
        {{usu}}
       </td>
      </tr>
      <tr>

      ----------- I need use ng-repeat in this piece ng-repeat="usu in atypeUsers"
        <td >READ</td>
        <td >EDIT</td>
        <td >DELETE</td>
        -------------------
      </tr>
      <tr>
      <tr ng-repeat="rol in aRoles">
       <td>{{rol.type_content}}</td>
       <td >true</td>
       <td >false</td>
       <td >true</td>
       <td >false</td>
       <td >true</td>
       <td >false</td>
      </tr>
    </table>

我需要这个

Answer 1

也许使用ng-repeat-start and ng-repeat-end

  <tr>
    <th rowspan="3">Type of content</th>
    <th colspan="{{atypeUsers.length * 3}}">
      Type of users
    </th>
  </tr>

  <tr>
   <td ng-repeat="usu in atypeUsers" colspan="3">
    {{usu}}
   </td>
  </tr>

  <tr>
   <td ng-repeat-start="usu in atypeUsers">
    READ
   </td>
   <td>
    EDIT
   </td>
   <td ng-repeat-end>
    DELETE
   </td>
  </tr>

Answer 2

可能您可以定义另一个读取json的函数并创建一个填充权限的数组，您可以在代码中使用ngRepeat在<td>中使用它。

我已经用这种方法实现了你想要的东西，虽然我的代码有点乱，你可以根据自己的需要进行优化。

检查此plunker

Answer 3

检查以下ng-repeat

＆＃13;

angular.module('app', [])
.controller('ctrl', function($scope){
$scope.aRoles=
     [
       {
         "type_content": "articles", 
         "type_usuario":{
          "administrator":
           {"write":true, "read":true, "delete":true},
          "other":
           {"write":true, "read":true, "delete":true}
         }     
       },
       {
         "type_content": "papers", 
         "type_usuario":{
          "administrator":
           {"write":true, "read":true, "delete":true},
          "other":
           {"write":true, "read":true, "delete":true}
         }     
       },
     ]        
    $scope.atypeUsers=Object.keys($scope.aRoles[0].type_usuario);

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
      
<div ng-app="app" ng-controller="ctrl">
   <table border='1'>
      <tr>
        <th rowspan="3">Type of content</th>
        <th colspan="{{atypeUsers.length * 3}}">
     Type of users
        </th>
      </tr>
      <tr>
       <td ng-repeat="usu in atypeUsers" colspan="3">
        {{usu}}
       </td>
      </tr>
      <tr>
        <td ng-repeat-start="usu in atypeUsers">READ</td>
        <td >EDIT</td>
        <td ng-repeat-end>DELETE</td>
        -------------------
      </tr>
      <tr ng-repeat="rol in aRoles">
       <td>{{rol.type_content}}</td>
       <td >true</td>
       <td >false</td>
       <td >true</td>
       <td >false</td>
       <td >true</td>
       <td >false</td>
      </tr>
    </table>
  </div>

＆＃13;

在Angularjs中生成动态？

3 个答案: