Question

我正在使用angularjs创建项目。我在显示数据时遇到问题：

我有JSON之类的：

$scope.customerContracts =     [{
      "description": null,
      "latency": "1",
      "linkid": "26149e91-f6c8-47fb-a10d-691e76486871",
      "contracts": [{
        "contractid": "26149e91-f6c8-47fb-a10d-691e76486871.2",
        "duration": 7200,
        "bandwidth": 300000,
        "price": 0,
        "contractStatus": 8,
        "version": 1560,
        "deletedtimestamp": 0,
        "currencyID": "1",
        "renewal-option": 1,
        "contract-start-time": 1461918999000,
        "contract-end-time": 1461926198000
      }],

      "tag": null,
      "connections": ["49b33cd1-5722-4e8e-b40c-03c3407c5efe", "cd354769-d52a-414e-bb7c-f0e0690ddf3b"],
      "type": "0",
      "linkStatus": 6,
      "billing-id": "5f1dd7c5-c48b-44ed-be14-cf2a8730fe27"
    }]

这是我在html中使用的代码。我不知道我哪里错了：

<tr ng-repeat="contract in customerContracts.contracts">
                  <td>{{contract.contractid}}</td>
                  <td>{{contract.contractStatus}}</td>
                  <td>{{contract.bandwidth}}</td>
                  <td>{{contract["contract-start-time"]}}</td>
                          <td>{{contract["contract-end-time"]}}</td>
                  <td>{{contract["renewal-option"]}}</td>
                  <td>{{contract.price}}</td>
                  <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
                </tr>

Answer 1

customerContracts是一个数组，你必须首先ng-repeat然后循环合同。

类似的东西：

<div ng-repeat="contracts in customerContracts">
<...>
<tr ng-repeat="contract in contracts.contracts">
                  <td>{{contract.contractid}}</td>
                  <td>{{contract.contractStatus}}</td>
                  <td>{{contract.bandwidth}}</td>
                  <td>{{contract["contract-start-time"]}}</td>
                          <td>{{contract["contract-end-time"]}}</td>
                  <td>{{contract["renewal-option"]}}</td>
                  <td>{{contract.price}}</td>
                  <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
                </tr>
<...>
</div>

Answer 2

您访问数据的方式出错了。 $scope.customerContracts没有contracts。里面的每个对象都有。然后再次contracts再次是一个对象数组。所以你需要再次repeat。你应该有像

这样的东西

<elem ng-repeat="customerContract in customerContracts">
    <tr ng-repeat="contract in customerContract.contracts">
        <! -- Your code -- >
    </tr>
</elem>

请注意，您需要根据自己的要求选择元素。

找到plunk省略elem。

Answer 3

在这个单独的$ scope中获取值，

$scope.getValue=$scope.customerContracts.contracts;

Answer 4

你的JSON不适合ng-repeat，因为它是一个arrat。如果您可以更改JSON（如果它不是来自您无法编辑的系统），请将其设置为这样，并且您现有的html将起作用。如果你确定它不是一个阵列。

$scope.customerContracts =    {
  "description": null,
  "latency": "1",
  "linkid": "26149e91-f6c8-47fb-a10d-691e76486871",
  "contracts": [{
    "contractid": "26149e91-f6c8-47fb-a10d-691e76486871.2",
    "duration": 7200,
    "bandwidth": 300000,
    "price": 0,
    "contractStatus": 8,
    "version": 1560,
    "deletedtimestamp": 0,
    "currencyID": "1",
    "renewal-option": 1,
    "contract-start-time": 1461918999000,
    "contract-end-time": 1461926198000
  }],

  "tag": null,
  "connections": ["49b33cd1-5722-4e8e-b40c-03c3407c5efe", "cd354769-d52a-414e-bb7c-f0e0690ddf3b"],
  "type": "0",
  "linkStatus": 6,
  "billing-id": "5f1dd7c5-c48b-44ed-be14-cf2a8730fe27"
};

如果您无法更改JSON格式，可以在html中执行此操作，它将起作用：

<div ng-repeat="contracts in customerContracts">
  <table>
    <tr ng-repeat="contract in contracts.contracts">
      <td>{{contract.contractid}}</td>
      <td>{{contract.contractStatus}}</td>
      <td>{{contract.bandwidth}}</td>
      <td>{{contract["contract-start-time"]}}</td>
      <td>{{contract["contract-end-time"]}}</td>
      <td>{{contract["renewal-option"]}}</td>
      <td>{{contract.price}}</td>
      <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
    </tr>
  </table>
</div>

Answer 5

如果你想使用现有的json，那么这将有效

customerContracts[0]

因为customerContracts[0]是一个数组，并且您正在从其第一个值（即字典）访问元素。所以你必须取大数组customerContracts[0].contracts的第0个元素，现在这个值def A #do something output = B #do something with output end是一个字典，所以你可以通过简单的点describe "check what A returns" do ClassName.stub(:B) do [0, 1] end test_values = TestClass.A(input parameters) #checks on test values end

从字典中访问

Answer 6

＆＃13;

angular.module('app',[]).controller('ctrl',function($scope,$http){

$scope.customerContracts =     [{
      "description": null,
      "latency": "1",
      "linkid": "26149e91-f6c8-47fb-a10d-691e76486871",
      "contracts": [{
        "contractid": "26149e91-f6c8-47fb-a10d-691e76486871.2",
        "duration": 7200,
        "bandwidth": 300000,
        "price": 0,
        "contractStatus": 8,
        "version": 1560,
        "deletedtimestamp": 0,
        "currencyID": "1",
        "renewal-option": 1,
        "contract-start-time": 1461918999000,
        "contract-end-time": 1461926198000
      }],

      "tag": null,
      "connections": ["49b33cd1-5722-4e8e-b40c-03c3407c5efe", "cd354769-d52a-414e-bb7c-f0e0690ddf3b"],
      "type": "0",
      "linkStatus": 6,
      "billing-id": "5f1dd7c5-c48b-44ed-be14-cf2a8730fe27"
    }];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table style="width:100%;text-align:center;">
  <tr>
    <th>contractid</th>
    <th>contractStatus</th> 
    <th>bandwidth</td>
    <th>contract-start-tim</th>
    <th>contract-end-time</th> 
    <th>renewal-option</th>
    <th>price</th> 
    <th></th>
  </tr>
  <tr ng-repeat="contract in customerContracts[0].contracts">
                  <td>{{contract.contractid}}</td>
                  <td>{{contract.contractStatus}}</td>
                  <td>{{contract.bandwidth}}</td>
                  <td>{{contract["contract-start-time"]}}</td>
                          <td>{{contract["contract-end-time"]}}</td>
                  <td>{{contract["renewal-option"]}}</td>
                  <td>{{contract.price}}</td>
                  <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
  </tr>
</table>
  
</div>

＆＃13;

在html页面的angularjs中显示数据

6 个答案: