如何使用 angularjs 制作动态 ng-repeat？答案

【问题标题】：How can i make dynamic ng-repeat using angularjs?如何使用 angularjs 制作动态 ng-repeat？
【发布时间】：2018-10-08 10:24:29
【问题描述】：

下面我添加了我的数据

[{
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"

}]

我想创建ng-repeat，但我不想硬编码任何字段（name、version、description、applicationenvironment）
我怎样才能做到这一点？

我的期望：

IN TABLE 应该是这样的

【问题讨论】：

你需要两个：一个是对象数组（ng-repeat="data in array"），另一个是每个对象的键值对（ng-repeat="(key,value) in data"），然后用@987654331显示@和{{value}}
你能添加完整的代码吗？我是新手，请帮助我继续前进
我只是注意到你希望它如何显示，你的表数据是一个数组是没有意义的。只需更改为对象即可。

标签： angularjs

【解决方案1】：

你的数组应该是一个对象。所以你的结构简化了很多。只需从您的对象中提取键和值并为每一行循环遍历它。然后在每行单独的列中显示键和值：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.table = [{
    "name": "testapp",
    "version": "2.0",
    "description": "testapp",
    "applicationenvironment": "angularjs"
  }]
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <table>

      <tr>
        <th>Key</th>
        <th>Value</th>
      </tr>

      <tr ng-repeat="(key, value) in table[0]">
        <td>{{key}}</td>
        <td>{{value}}</td>
      </tr>

    </table>
  </div>
</body>
</html>

【讨论】：

如何添加 orderBy : 'key'
@coco 这毫无意义。无法订购对象。您可能需要以某种方式turn them into an array（在控制器中）

【解决方案2】：

虽然我不建议你使用这种结构，但你可以这样做：

angular.module('app', [])
.controller('appController', function () {
    this.data = {
        "name":"testapp",
        "version":"2.0",
        "description":"testapp",
        "applicationenvironment":"angularjs"
    };
});

你的 HTML 应该是这样的：

<div ng-app="app" ng-controller="appController as vm">
    <ul>
         <li ng-repeat="(key, value) in vm.data"> {{ key }} : {{ value }}</li>
    </ul>
</div>

如果您仍然需要将数据保存在问题中所写的数组中，则必须遍历数组和对象。

【讨论】：

如何添加 orderBy : 'key'

【解决方案3】：

现在因为你的数据源是一个数组，你需要做两个嵌套的 ng-repeats

let app = angular.module("table",[]);
    app.controller("tableCtrl", ["$scope", function($scope){

    $scope.data = [{
    "name":"testapp",
    "version":"2.0",
    "description":"testapp",
    "applicationenvironment":"angularjs"
    },
    {
    "name":"testapp 2",
    "version":"2.1",
    "description":"testapp 2",
    "applicationenvironment":"angularjs"
    }];
    }]);

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

现在如果你这样做，你的数据结构应该会产生想要的结果

【讨论】：

【解决方案4】：

您需要循环两次：一次遍历整个对象数组以访问每个对象，然后在每个对象内部访问单独的键值对。

我已经发布了下面的代码：

angular.module('app', [])
.controller('Controller1', function () {
    this.data = {
        "name":"testapp",
        "version":"2.0",
        "description":"testapp",
        "applicationenvironment":"angularjs"
    };
});

<div ng-app="app" ng-controller="Controller1 as c1">
    <table>

    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>

    <tr ng-repeat="c in c1.data">
       <table>
         <tr ng-repeat="(key, value) in c">
         <td> {{ key }} </td>
         <td> {{ value }} </td>
         </tr>
       </table>
    </tr>
    </table>
</div>

【讨论】：