Question

我的目标是使用以下示例嵌套JSON中的AngularJS以下面的格式实现表格。

myReqObj: MyRequest = new MyRequest(null, null);
this.myReqObj.endValue = '23'

在＆＃39;值下有两个对象＆＃39;键，它将在表中创建两行。我在这里使用JSON创建表的问题是，我需要遍历＆＃39; 95-95＆＃39;对象，＆＃39; 95-99＆＃39;对象等并创建＆＃3;＆＃39;每个对象的列。通过以下代码，我可以在＆＃39; 95-95＆＃39;下创建3列。宾语;但是你可以看到我用＆＃39; AAAA1 ＆＃39;进行了硬编码。 { "traits": ["Number of Observations","Observed Number of Exceptions","95-99", "95-95","99-95", "99-99"], "values": [ { "AAAA1": { "Number of Observations": 252, "95-95": { "Test Statistic": -1.040531963428947, "P-Value": 0.85095358899764695, "Test Outcome": "p-value >=0.05" }, "95-99": { "Test Statistic": 5.368809379876272, "P-Value": 3.9629067916102656e-08, "Test Outcome": "p-value <0.01" }, "Observed Number of Exceptions": 9 } }, { "AAAA2": { "Number of Observations": 43, "95-99": { "Test Statistic": -1.040531963428947, "P-Value": 0.85095358899764695, "Test Outcome": "p-value >=0.05" }, "95-95": { "Test Statistic": -0.46245865041286727, "P-Value": 0.67812377583172401, "Test Outcome": "p-value >=0.05" }, "Observed Number of Exceptions": 7 } } ] }中的键值。 在表格的行级别，我正在使用外部最多的json循环;对于＆＃39; td＆＃39;创建循环遍历最内层的JSON对象，因此无法获得中级对象键值。 有什么方法可以从任何键值“AAAA1＆＃39;”中获取它，＆＃39; AAAA2＆＃39;哪个对象不在任何ng-repeat。

ng-repeat

由于我无法实现这一点，我目前仍然坚持使用下面的静态代码，这对我来说并不是很有用。

<tr ng-repeat="(key,value) in Controller.values">

    <td class="text-center"  ng-repeat="(key1,value1) in value['AAAA1']['95-95']">
        {{value1}}                   
    </td>

Answer 1

因为value['AAAA1']['95-95']必须是数组。

ng-Repeat仅适用于数组：（

Answer 2

如果你想避免控制器中的指令或代码，你可以这样做：

＆＃13;

const myApp = angular.module('myApp', []);

myApp.controller('Ctrl', ($scope) => {
	$scope.values = 
  [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  
  ]
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
  <table ng-controller="Ctrl">
    <tbody ng-repeat="value in values">
      <tr ng-repeat="(name, objectAA) in value">
        <th ng-bind="name"></th>
        <td ng-repeat="(key, value) in objectAA['95-95']" ng-bind="value">
          
        </td>
        <td ng-repeat="(key, value) in objectAA['95-99']" ng-bind="value">
          
        </td>
      </tr>
    </tbody>
  </table>
</body>

＆＃13;

要避免静电＆＃39; 95-95＆＃39;和＆＃39; 95-99＆＃39;在html中，您可以在控制器中提取它们。

使用控制器中的特定代码，您可以这样做：

＆＃13;

const myApp = angular.module('myApp', []);

myApp.controller('Ctrl', ($scope) => {

  $scope.rows = []

	$scope.values = 
  [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  
  ]
  
  $scope.values.forEach((value) => {
    Object.keys(value).forEach((name) => {
      $scope.rows.push({name: name, value: value[name]});
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
  <table ng-controller="Ctrl">
      <tr ng-repeat="row in rows">
        <th ng-bind="row.name"></th>
        <td ng-repeat="(key, value) in row.value['95-95']" ng-bind="value">
          
        </td>
        <td ng-repeat="(key, value) in row.value['95-99']" ng-bind="value">
          
        </td>
      </tr>
  </table>
</body>

＆＃13;

无法获得正确的关键＆＃39;来自JSON的值 - AngularJS

2 个答案: