具有动态json / object的angularjs ng-repeat

Question

我正在寻找一种具有ng-repeat的动态数据结构（与不同的属性名称和属性长度不一致）的解决方案。 示例代码如下。

    $scope.data = [{
        "table":[{
        "employee":"name1",
        "value1":"10",
        "value2":"20"
        },
        {
        "employee":"name2",
        "value1":"15",
        "value2":"30"
        }]
    },
    {
        "table":[{
        "company":"name1",
        "compnayValue":"12"
        },
        {
        "company":"name2",
        "compnayValue":"12"
        }]
    }]

    <ul>
        <li ng-repeat="item in data">
            <table>
                <tr ng-repeat="row in item.table">
                    <td>{{??}}</td>
                    <td>{{??}}</td>
                </tr>
            </table>
        </li>
    </ul>

Answer 1

您可以枚举所有属性，并在td上通过另一个ng-repeat显示它们的值：

<li ng-repeat="item in data">
  <table>
    <tr ng-repeat="row in item.table">
      <td ng-repeat="(key, value) in row">
        {{row[key]}}
      </td>
    </tr>
  </table>
</li>

但这会破坏数据的表格格式，因为某些行的td会更多。 为了防止这种情况，你可以先找出一组中的所有行的所有按键，做了th重复与第一，然后在相应的显示它们td更低，如：

<th ng-repeat="propertyName in allPossiblePropertyNames">
  {{propertyName}}
</th>

和

<td ng-repeat="propertyName in allPossiblePropertyNames">
  {{row[propertyName ]}}
</td>

Answer 2

使用<tbody>表示table数组内的对象(key,value)并使用“ 遍历对象属性”部分中提到的(key,value)语法遍历其属性，例如：

 angular.module('test', []).controller('testCtrl', function($scope) { $scope.data = [{ "table": [{ "employee": "name1", "value1": "10", "value2": "20" }, { "employee": "name2", "value1": "15", "value2": "30" }] }, { "table": [{ "company": "name1", "compnayValue": "12" }, { "company": "name2", "compnayValue": "12" }] }] }); 

 ul { padding: 0; } ul li { list-style-type: none; margin-bottom: 10px; } table { width: 100%; table-layout: fixed; background: #ebebeb; } tbody:nth-child(odd) tr { color: #fff; background: dodgerblue; } tbody:nth-child(even) tr { color: #fff; background: hotpink; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="test" ng-controller="testCtrl"> <ul> <li ng-repeat="item in data"> <table> <tbody ng-repeat="row in item.table"> <tr ng-repeat="(key, value) in row"> <td> {{key}} </td> <td> {{value}} </td> </tr> </tbody> </table> </li> </ul> </div> 

Answer 3

检查此插件，您可以根据您的数据定义模板： https ://plnkr.co/edit/fVGhKZy5gnBzuPwspy5s?p=preview

使用角度滤镜：

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = [{
      "table":[{
      "employee":"name1",
      "value1":"10",
      "value2":"20"
      },
      {
      "employee":"name2",
      "value1":"15",
      "value2":"30"
      }]
  },
  {
      "table":[{
      "company":"name1",
      "compnayValue":"12"
      },
    {
    "company":"name2",
    "compnayValue":"12"
    }]
  }]
 })
  .filter('isCompnay', function() {
   return function(input) {
   console.log(input.employee === undefined)
   return input.company ? input : undefined;
  };
})
.filter('isEmployee', function() {
return function(input) {
  console.log(input.employee === undefined)
  return input.employee ? input : undefined;
   };
 });