Question

我有两个json对象作业

[  
  {  
    "code":"Maxo- 1033",
    "title":"Test",
    "deleted_by":2,
    "updated_at":"2017-08-23 06:32:42"
  },
  {  
    "code":"Maxo- 1034",
    "title":"Test",
    "deleted_by":2,
    "updated_at":"2017-08-24 04:55:10"
  }
]

其他是标题

[  
  "code",
  "title",
  "deleted_by",
  "updated_at"
]

我想使用标题数据打印作业数据如下面的代码。

<tbody>
   <tr ng-repeat = 'job in jobs'>
       <td ng-repeat = 'column in headers'> 
           @{{job.column}}  //i want job.code for first iteration and like                          
       </td>
  </tr>
</tbody>

预期的表格输出：代码标题由updated_at删除 Maxo Test 2 2017-08-23 06:32:42

Answer 1

您可以使用嵌套的ng-repeat

执行此操作

＆＃13;

var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
    $scope.jobs = [{
        "code": "Maxo- 1033",
        "title": "Test",
        "deleted_by": 2,
        "updated_at": "2017-08-23 06:32:42"
    }, {
        "code": "Maxo- 1034",
        "title": "Test",
        "deleted_by": 2,
        "updated_at": "2017-08-24 04:55:10"
    }];
    $scope.headers = ["code", "title", "deleted_by", "updated_at"];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp" ng-controller="testCtrl">
    <table>
        <thead>
            <tr>
                <th ng-repeat="header in headers">{{header| uppercase }}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="job in jobs">
                <td ng-repeat="header in headers"> {{job[header]}} </td>
            </tr>
        </tbody>
    </table>
</body>

＆＃13;

Answer 2

你可以通过嵌套的ng-repeat s

来做到这一点

var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
  $scope.jobs = [{
    "code": "Maxo- 1033",
    "title": "Test",
    "deleted_by": 2,
    "updated_at": "2017-08-23 06:32:42"
  }, {
    "code": "Maxo- 1034",
    "title": "Test",
    "deleted_by": 2,
    "updated_at": "2017-08-24 04:55:10"
  }];
  $scope.headers = [
    "code",
    "title",
    "deleted_by",
    "updated_at"
  ];
});

table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp" ng-controller="testCtrl">
  <table>
    <tbody>
      <tr>
        <th ng-repeat="header in headers">{{header}}</th>
      </tr>
      <tr ng-repeat="job in jobs">
        <td ng-repeat="header in headers">{{job[header]}}</td>
      </tr>
    </tbody>
  </table>
</body>

Answer 3

看到这个不需要嵌套的NgRepeat：

＆＃13;

var app = angular.module('App',[]);
app.controller('Ctrl',function($scope){
   $scope.jobs = [{"code":"Maxo- 1033","title":"Test","deleted_by":2,"updated_at":"2017-08-23 06:32:42"},{"code":"Maxo- 1034","title":"Test","deleted_by":2,"updated_at":"2017-08-24 04:55:10"}];
$scope.Headers = [  
  "code",
  "title",
  "deleted_by",
  "updated_at"
];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="App" ng-controller="Ctrl">
    <table>
    <thead>   
     <tr >  
          <th ng-repeat="h in Headers">{{h}} </th>
      </tr>
    </thead>
        <tbody>        
            <tr ng-repeat="job in jobs">            
                <td> {{job.code}} </td>
                <td> {{job.title}} </td>
                <td> {{job.deleted_by}} </td>
                <td> {{job.updated_at}} </td>
            </tr>
        </tbody>
    </table>
</body>

＆＃13;

Answer 4

在这里你必须使用html的表结构。

你可以这样做：

<强> JS

$scope.headerArr = ["code",
                    "title",
                    "deleted_by",
                    "updated_at"
                   ]

$scope.childObj = [{"code":"Maxo- 1033","title":"Test","deleted_by":2,"updated_at":"2017-08-23 06:32:42"},
                   {"code":"Maxo- 1034","title":"Test","deleted_by":2,"updated_at":"2017-08-24 04:55:10"}]

<强> HTML

<table>
        <thead>
         <tr >
             <th ng-repeat = 'item in headerArr'> 
             {{item}}
             </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat = 'item in childObj'>
          <td >
            {{item.code}}
          </td>
          <td >
            {{item.title}}
          </td>
          <td >
            {{item.deleted_by}}
          </td>
           <td >
            {{item.updated_at}}
          </td>
        </tr>
      </tbody>
     </table>

希望demo能为您提供帮助。

Answer 5

试试这个

<tbody>
  <tr ng-repeat = "job in jobs">
      <td ng-repeat="header in headers">
           {{job[header]}}
      </td>
  </tr>
</tbody>

如何使用嵌套的ng-repeat循环两个JSON对象？

5 个答案: