Table 与 AngularJS 使用不同的 json

Question

我是 AngularJS 的新手，我创建了一个 table 来显示来自两个不同 JSON 的信息。为此，我 "mixed" 他们得到了一个。我的代码：

test.html

    <!doctype html>
<html ng-app="App">
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="myCtrl" ng-init="init()">

<table border=1>
  <thead>
    <tr>
      <th>Position</th>
      <th>Ticket</th>
      <th>Customer</th>
    </tr>
  </thead>
  <tbody ng:repeat="element in array">
    <tr><td align=center>{{$index}}</td>
        <td align=center>
          {{element.ticket.code}}<br>
          <strong>{{element.ticket.city}}</strong><br>
          <em>{{element.ticket.value | currency}}</em>
        </td>
        <td  align=center>
          {{element.customer.name}}<br>
          {{element.customer.age}}
        </td>
    </tr>
  </tbody>
</table>

</body>
</html>

script.js

var app = angular.module('App', []);

app.controller("myCtrl", function($scope){ 
  $scope.tickets = [ {code:'1', city:'Istanbul', value:10.0},
                     {code:'2', city:'London', value:50.0},
                     {code:'3', city:'Paris', value:30.0}
                    ]; 
  $scope.customers = [ {name:'Customer1', age:36},
                       {name:'Customer2', age:42},
                       {name:'Customer3', age:28}
                     ];

  $scope.array = [];

  $scope.init = function(){
    var k = 0;
    for(; k < $scope.tickets.length && k < $scope.customers.length; k++)
      $scope.array.push({ticket:$scope.tickets[k], customer:$scope.customers[k]});

    for(; k < $scope.tickets.length; k++)
      $scope.array.push({ticket:$scope.tickets[k], customer:{name:'',age:''}});
    for(; k < $scope.customers.length; k++)
      $scope.array.push({ticket:{code:'',city:'',name:''}, customer:$scope.customers[k]});
  };

});

有没有更好的方法来显示 table 使用来自不同 JSON 的信息？有没有可能做同样的事情而不需要只得到一个 JSON?

Answer 1

您可以使用一个 ng-repeat 并使用 customers[$index] 访问您的客户对象数组。

请查看下面或此 jsfiddle 中的演示。

angular.module('App', [])
.controller("myCtrl", function($scope){ 
  $scope.tickets = [ {code:'1', city:'Istanbul', value:10.0},
                     {code:'2', city:'London', value:50.0},
                     {code:'3', city:'Paris', value:30.0}
                    ]; 
  $scope.customers = [ {name:'Customer1', age:36},
                       {name:'Customer2', age:42},
                       {name:'Customer3', age:28}
                     ];

  $scope.array = [];

  $scope.init = function(){
    var k = 0;
    for(; k < $scope.tickets.length && k < $scope.customers.length; k++)
      $scope.array.push({ticket:$scope.tickets[k], customer:$scope.customers[k]});

    for(; k < $scope.tickets.length; k++)
      $scope.array.push({ticket:$scope.tickets[k], customer:{name:'',age:''}});
    for(; k < $scope.customers.length; k++)
      $scope.array.push({ticket:{code:'',city:'',name:''}, customer:$scope.customers[k]});
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="myCtrl" ng-init="init()">
    <h2>table with js mapping</h2>
<table border=1>
  <thead>
    <tr>
      <th>Position</th>
      <th>Ticket</th>
      <th>Customer</th>
    </tr>
  </thead>
  <tbody ng:repeat="element in array">
    <tr><td align=center>{{$index}}</td>
        <td align=center>
            {{element.ticket.code}}<br/>
            <strong>{{element.ticket.city}}</strong><br/>
          <em>{{element.ticket.value | currency}}</em>
        </td>
        <td  align=center>
            {{element.customer.name}}<br/>
          {{element.customer.age}}
        </td>
    </tr>
  </tbody>
</table>
       
    <h2>table with ng-repeat</h2>
    <table border=1>
  <thead>
    <tr>
      <th>Position</th>
      <th>Ticket</th>
      <th>Customer</th>
    </tr>
  </thead>
  <tbody ng:repeat="ticket in tickets">
    <tr><td align=center>{{$index}}</td>
        <td align=center>
            {{ticket.code}}<br/>
            <strong>{{ticket.city}}</strong><br/>
          <em>{{ticket.value | currency}}</em>
        </td>
        <td  align=center>
            {{customers[$index].name}}<br/>
          {{customers[$index].age}}
        </td>
    </tr>
  </tbody>
</table>
      </div>

Table 与 AngularJS 使用不同的 json

Table with AngularJS using different jsons

javascript

html-table

angularjs