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

您可以枚举所有属性并按ng-repeat上的其他td显示其值：

<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 s。为了防止您首先找到所有行上的所有键的集合，请先用th重复这些键，然后在下面相应的td上显示它们，例如：

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

和

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

Answer 2

使用<tbody>来表示table部分中的对象以及iterating over object properties部分中提到的(key,value)语法，以迭代它的属性，如：

＆＃13;

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"
    }]
  }]
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

检查这个plunker，你可以定义模板取决于你的数据： 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;
   };
 });

angularjs ng-repeat with dynamic json / object

3 个答案: