Question

这是我的json数据。如何使用angular.js在HTML表格中绑定此数据？

[{"keycolumn1":1,"originkey1":1,"datafield1":1},
{"keycolumn1":2,"originkey1":2,"datafield1":2},
{"keycolumn1":3,"originkey1":3,"datafield1":3},
{"keycolumn1":4,"originkey1":4,"datafield1":4},
{"keycolumn1":5,"originkey1":5,"datafield1":5},
{"keycolumn1":11,"originkey1":11,"datafield1":11},
{"keycolumn1":12,"originkey1":12,"datafield1":12},
{"keycolumn1":13,"originkey1":13,"datafield1":13},
{"keycolumn1":14,"originkey1":14,"datafield1":14},
{"keycolumn1":15,"originkey1":15,"datafield1":15}]

Answer 1

试试这个，

var appReminder = angular.module('testApp', []);
appReminder.factory('testFactory', function ($http) {
return {}
});
        
appReminder.controller('testController', function PostController($scope, testFactory, $timeout) 
{
  
   $scope.result_function = function () 
   {
      $scope.respose = [
        {"keycolumn1":1,"originkey1":1,"datafield1":1},
        {"keycolumn1":2,"originkey1":2,"datafield1":2},
        {"keycolumn1":3,"originkey1":3,"datafield1":3},
        {"keycolumn1":4,"originkey1":4,"datafield1":4},
        {"keycolumn1":5,"originkey1":5,"datafield1":5},
        {"keycolumn1":11,"originkey1":11,"datafield1":11},
        {"keycolumn1":12,"originkey1":12,"datafield1":12},
        {"keycolumn1":13,"originkey1":13,"datafield1":13},
        {"keycolumn1":14,"originkey1":14,"datafield1":14},
        {"keycolumn1":15,"originkey1":15,"datafield1":15}];
   ;}
  
  $scope.result_function();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="testApp" data-ng-controller="testController">
  <table border="1">
     <tr>
       <th>Keycolumn</th>
       <th>Originkey</th>
       <th>Datafield</th>
     <tr>
     <tr ng-repeat="item in respose">
       <td>{{item.keycolumn1}}</td>
       <td>{{item.originkey1}}</td>
       <td>{{item.datafield1}}</td>
     </tr>
</table>
</div>

Answer 2

有许多方法可以在角度中显示json数据，你可以将你的json绑定为

纳克重复
```
   <tr ng-repeat="values in data"> 
```
嵌套ng-repeat，具体取决于json格式

ng-repeat with'track by'处理索引值时

    <tr ng-repeat="item in rows">
          <td>{{item.project}}({{item.task}})</td>
          <td  ng-repeat="values in item.hour track by $index">
         <input type="number" ng-model="item.hour[$index]"/>    
          </td>
    </tr>

ng-repeat with key value pairs

    <tr ng-repeat="(key, value) in data">
     <td> {{key}} </td> <td> {{ value }} </td>
    </tr>

在您的情况下，最好的选择是使用基本的ng-repeat作为

   <tr ng-repeat="values in data">
      <td>{{values.keycolumn1}}</td>
      <td>{{values.originkey1}}</td>
      <td>{{values.datafield1}}</td>
   </tr>

Answer 3

您的意思是在html表格中显示json内容吗？

<table>
  <tr ng-repeat="r in json">
    <td>{{r.keycolumn1}}</td>
    <td>{{r.originkey1}}</td>
    <td>{{r.datafield1}}</td>
  </tr>
</table>

在html中你可以使用ng-repeat

{{1}}

Answer 4

将其存储在json文件（data.json）中。使用$ http将此数据作为响应获取并将其存储在$ scope变量中。

例如：

$http.get("data.json").then(function(response) {
$scope.data = response.data;
});

Answer 5

您需要将json分配给范围变量，如下所示

$scope.data="your data";

现在使用此数据，您可以使用ng-repeat

在表格中循环

here是一个包含数据的样本插件

Answer 6

通过在控制器中使用json数据来简单地使用ng-repeat

 <table>
  <tr ng-repeat="r in jsonData">
    <td>{{r.keycolumn1}}</td>
    <td>{{r.originkey1}}</td>
    <td>{{r.datafield1}}</td>
  </tr>
</table>

你也可以在你的Json文件中使用它

{  
   "data":[  
      {  
         "keycolumn1":1,
         "originkey1":1,
         "datafield1":1
      },
      {  
         "keycolumn1":2,
         "originkey1":2,
         "datafield1":2
      },
      {  
         "keycolumn1":3,
         "originkey1":3,
         "datafield1":3
      },
      {  
         "keycolumn1":4,
         "originkey1":4,
         "datafield1":4
      },
      {  
         "keycolumn1":5,
         "originkey1":5,
         "datafield1":5
      },
      {  
         "keycolumn1":11,
         "originkey1":11,
         "datafield1":11
      },
      {  
         "keycolumn1":12,
         "originkey1":12,
         "datafield1":12
      },
      {  
         "keycolumn1":13,
         "originkey1":13,
         "datafield1":13
      },
      {  
         "keycolumn1":14,
         "originkey1":14,
         "datafield1":14
      },
      {  
         "keycolumn1":15,
         "originkey1":15,
         "datafield1":15
      }
   ]
}

并在你的控制器中使用它

$http.get('jsonData.json').success(function(data) {
       $scope.jsonFileData = data.data;
    });

我已经制作了一个 LIVE PLUNK ，其中包含两个示例

Answer 7

首先，您需要将控制器与视图关联，然后您可以在视图中访问控制器的变量。

<div  ng-controller="controllername as vm">
<table>
<tr ng-repeat="anyvariable in vm.json">
<td>{{anyvariable.keycolumn1}}</td>
<td>{{anyvariable.originkey1}}</td>
<td>{{anyvariable.datafield1}}</td>
</tr>
</table>
</div>

我如何使用角度js绑定html表中的json数据？

7 个答案: