带有使用不同json的AngularJS的表

戴维·马里尼奥(Deivid Marinho)

我是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>

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

});

有没有更好的方法来使用来自不同JSON的信息来显示表?是否有可能做同样的事情而无需仅获取一个JSON?

一只狼

您可以使用,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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在MySQL表的单列上是否有使用不同索引名称的多个索引的任何特定用途

来自分类Dev

Vim:对带有图案的单词使用不同的颜色

来自分类Dev

Three.js对于不同的网格物体没有使用不同的着色器程序,为什么?

来自分类Dev

来自带有Angularjs的JSON表

来自分类Dev

带有来自angularjs的json数据的表

来自分类Dev

使用不同的表更新表

来自分类Dev

使用不同的表添加约束

来自分类Dev

使用不同表的相同列查询

来自分类Dev

带有 HighChart 的 ColorAxis 在使用不同的库集时无法按预期工作

来自分类Dev

d3 响应式分组条形图,带有使用 json 文件的工具提示

来自分类Dev

不同的屏幕宽度使用不同的样式表

来自分类Dev

AngularJS定义服务中私有使用的辅助函数

来自分类Dev

是否有使用Beautifulsoup解析表的更多pythonic方式

来自分类Dev

具有使用单个数组的节的表视图

来自分类Dev

一直没有使用的表上的索引

来自分类Dev

当 JSON Payload 具有不同格式时,使用 Javascript 或 jQuery if else 语句来使用不同的变量

来自分类Dev

带有多个使用不同版本控制系统(Subversion和TFS)的项目的Visual Studio解决方案

来自分类Dev

如何每次Jmeter都使用不同的文件多次发布带有文件上传的http请求

来自分类Dev

使用 VBA 循环使用不同名称的工作表

来自分类Dev

带有不同表的多种情况

来自分类Dev

AngularJS和PHP使用不同的服务器吗?

来自分类Dev

使用不同的NG-Includes重复内容-AngularJS

来自分类Dev

JSON,没有使用jQuery的ul li标签的键名

来自分类Dev

Grunt没有使用正确的JSON文件

来自分类Dev

LINQ to Entities表前100名(使用不同的名称)

来自分类Dev

使用数据透视表时应用不同的聚合函数

来自分类Dev

使用不同的表计算SQL查询中的中位数

来自分类Dev

使用不同的表对sql查询中的行进行分组

来自分类Dev

Dartlang:使用不同数量的单选按钮创建表行

Related 相关文章

  1. 1

    在MySQL表的单列上是否有使用不同索引名称的多个索引的任何特定用途

  2. 2

    Vim:对带有图案的单词使用不同的颜色

  3. 3

    Three.js对于不同的网格物体没有使用不同的着色器程序,为什么?

  4. 4

    来自带有Angularjs的JSON表

  5. 5

    带有来自angularjs的json数据的表

  6. 6

    使用不同的表更新表

  7. 7

    使用不同的表添加约束

  8. 8

    使用不同表的相同列查询

  9. 9

    带有 HighChart 的 ColorAxis 在使用不同的库集时无法按预期工作

  10. 10

    d3 响应式分组条形图,带有使用 json 文件的工具提示

  11. 11

    不同的屏幕宽度使用不同的样式表

  12. 12

    AngularJS定义服务中私有使用的辅助函数

  13. 13

    是否有使用Beautifulsoup解析表的更多pythonic方式

  14. 14

    具有使用单个数组的节的表视图

  15. 15

    一直没有使用的表上的索引

  16. 16

    当 JSON Payload 具有不同格式时,使用 Javascript 或 jQuery if else 语句来使用不同的变量

  17. 17

    带有多个使用不同版本控制系统(Subversion和TFS)的项目的Visual Studio解决方案

  18. 18

    如何每次Jmeter都使用不同的文件多次发布带有文件上传的http请求

  19. 19

    使用 VBA 循环使用不同名称的工作表

  20. 20

    带有不同表的多种情况

  21. 21

    AngularJS和PHP使用不同的服务器吗?

  22. 22

    使用不同的NG-Includes重复内容-AngularJS

  23. 23

    JSON,没有使用jQuery的ul li标签的键名

  24. 24

    Grunt没有使用正确的JSON文件

  25. 25

    LINQ to Entities表前100名(使用不同的名称)

  26. 26

    使用数据透视表时应用不同的聚合函数

  27. 27

    使用不同的表计算SQL查询中的中位数

  28. 28

    使用不同的表对sql查询中的行进行分组

  29. 29

    Dartlang:使用不同数量的单选按钮创建表行

热门标签

归档