Question

下面我添加了我的数据

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

}]

我想制作ng-repeat，但是我不想对任何字段（name，version，description，applicationenvironment）进行硬编码
我该如何实现？

我的期望：

在表中应该是这样

Answer 1

尽管我不建议您使用这种结构，但是您可以执行以下操作：

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>

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

Answer 2

您的数组应该是一个对象。因此，您的结构大大简化了。只需从对象中提取键和值，然后在每一行中对其进行循环。然后在每行的单独列中显示键和值：

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>

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

现在，如果执行此操作，则数据结构将产生所需的结果

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

我如何使用angularjs进行动态ng-repeat？

4 个答案: