Javascript 使用不同JSON的AngularJS表_Javascript_Angularjs_Html Table

Javascript 使用不同JSON的AngularJS表

javascript angularjs

Javascript 使用不同JSON的AngularJS表,javascript,angularjs,html-table,Javascript,Angularjs,Html Table,我是AngularJS的新手，我创建了一个表来显示来自两个不同JSON的信息。为了做到这一点，我把它们“混合”在一起，得到一个。我的代码： 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/angula

我是AngularJS的新手，我创建了一个表来显示来自两个不同JSON的信息。为了做到这一点，我把它们“混合”在一起，得到一个。我的代码：

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>


位置
票
顾客
{{$index}}
{{element.ticket.code}}

{{element.ticket.city}

{{element.ticket.value | currency}
{{element.customer.name}}

{{element.customer.age}

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]});
  };

});

var-app=angular.module（'app'，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.tickets=[{代码：'1'，城市：'伊斯坦布尔'，值：10.0}，
{代码：'2'，城市：'London'，值：50.0}，
{代码：'3'，城市：'Paris'，值：30.0}
]; 
$scope.customers=[{name:'Customer1'，年龄：36}，
{姓名：'Customer2'，年龄：42}，
{姓名：'Customer3'，年龄：28}
];
$scope.array=[]；
$scope.init=函数（）{
var k=0；
对于（；k<$scope.tickets.length&&k<$scope.customers.length；k++）
$scope.array.push（{ticket:$scope.tickets[k]，customer:$scope.customers[k]}）；
对于（；k<$scope.tickets.length；k++）
$scope.array.push（{ticket:$scope.tickets[k]，客户：{name:''，age:'}}）；
对于（；k<$scope.customers.length；k++）
$scope.array.push（{票证：{代码：''，城市：''，名称：'}，客户：$scope.customers[k]}）；
};
});

是否有更好的方法使用来自不同JSON的信息显示表？不需要只获取一个JSON就可以做同样的事情吗？

您可以使用一个

ng repeat

并使用

customers[$index]

访问您的客户对象数组

请看一下下面的演示或本演示

angular.module（'App'，[]）
.controller（“myCtrl”，函数（$scope）{
$scope.tickets=[{代码：'1'，城市：'伊斯坦布尔'，值：10.0}，
{代码：'2'，城市：'London'，值：50.0}，
{代码：'3'，城市：'Paris'，值：30.0}
]; 
$scope.customers=[{name:'Customer1'，年龄：36}，
{姓名：'Customer2'，年龄：42}，
{姓名：'Customer3'，年龄：28}
];
$scope.array=[]；
$scope.init=函数（）{
var k=0；
对于（；k<$scope.tickets.length&&k<$scope.customers.length；k++）
$scope.array.push（{ticket:$scope.tickets[k]，customer:$scope.customers[k]}）；
对于（；k<$scope.tickets.length；k++）
$scope.array.push（{ticket:$scope.tickets[k]，客户：{name:''，age:'}}）；
对于（；k<$scope.customers.length；k++）
$scope.array.push（{票证：{代码：''，城市：''，名称：'}，客户：$scope.customers[k]}）；
};
});

具有js映射的表
位置
票
顾客
{{$index}}
{{element.ticket.code}}

{{element.ticket.city}

{{element.ticket.value | currency}
{{element.customer.name}}

{{element.customer.age}
具有ng重复的表格
位置
票
顾客
{{$index}}
{{ticket.code}}

{{ticket.city}

{{ticket.value | currency}}
{{customers[$index].name}}

{{customers[$index].age}
谢谢您的回答。我真的没有想过使用$index来访问另一个数组的元素。如果ng repeat中的数组长度等于或大于另一个数组的长度，则它可以完美地工作。但是，如果ng repeat中使用的数组（在本例中为tickets）的长度小于$index（customers）访问的数组，则后者数组的其他元素将不会出现……无论如何，谢谢！）