Question

我在控制器中有变量$scope.myData并将其传递给html视图。但我想要一个这样的格式：

Seatno       name             Seatno     name         Seatno    name       Seatno      name 
1         Scott tooker          2      Mary Tooker      3       Lea          4         Gina
5         Aldrin Sorian         6      Ria Caballes     7       Yuna         8         Anna
9         .....                 10      ....            11     .....         12       ....

但格式显示错误。我该怎么做这种格式？任何帮助将不胜感激。谢谢。

＆＃13;

var installApp = angular.module("installApp", []);
installApp.controller("SeatingmanifestreportCtrl", function ($scope) {
'use strict';

    $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'
    ];

     $scope.myData = [
         {
             seatno:'1',
             name:'Cristina Tooker',
             ticketnNo:"abc456",
             insuranceNo:34
         },
         {
             seatno:'2',
             name:'Malanie Laparga',
             ticketnNo:"abc231",
             insuranceNo:90
         },
         {
             seatno:'3',
             name:'Luna Marie',
             ticketnNo:"abc324",
             insuranceNo:35
         },
         {
             seatno:'4',
             name:'Hayes Dave',
             ticketnNo:"abc221",
             insuranceNo:91
         },
         {
             seatno:'5',
             name:'Scott Tooker',
             ticketnNo:"abc453",
             insuranceNo:36
         },
         {
             seatno:'6',
             name:'Malanies Santos',
             ticketnNo:"abc241",
             insuranceNo:93
         },
         {
             seatno:'7',
             name:'Luna Marie Landiola',
             ticketnNo:"abc322",
             insuranceNo:39
         },
         {
             seatno:'8',
             name:'David Marine',
             ticketnNo:"abc222",
             insuranceNo:92
         },
     ];

   console.log($scope.myData);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="installApp">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="SeatingmanifestreportCtrl" data-ng-init="init()">
    <table width="100%" border="1">
        <colgroup span="7"></colgroup>
   	<tbody>
	    <tr ng-repeat="value in myData">
	        <td>{{value.seatno}}</td>
	        <td>{{value.name}}</td>
                </td>
            </tr>
        </tbody>
    </table>
 <script src="angular.min.js"></script>  
 <script src="seatingmanifestreport.js"></script>

＆＃13;

Answer 1

您可以使用ng-if="$even"和ng-if="$odd"

<table width="100%" border="1">
<colgroup span="7"></colgroup>
    <tbody>
        <tr ng-repeat="value in myData " ng-if="$even">
        <td>{{value.seatno}}</td>
        <td>{{value.name}}</td>
        </tr>
        <tr ng-repeat="value in myData " ng-if="$odd">
        <td>{{value.seatno}}</td>
        <td>{{value.name}}</td>
        </tr>
    </tbody>
</table>

Answer 2

Plunker link "http://plnkr.co/edit/NsW2KWzYpJKnslk4YmmP?p=preview"   
 <!DOCTYPE html>
    <html>

      <head>
        <script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
      </head>

      <body ng-app="myApp" ng-controller="check">
       <table cellpadding="2">
                <thead>
                    <tr>
                    <th ng-repeat="j in getLength(4) track by $index">SeatNo  Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="i in getLengthData() track by $index">
                      <td ng-repeat="data in  getArray($index)">{{data.seatno}} {{data.name}}</td>
                    </tr>
                </tbody>
            </table>
      <script>
        var app=angular.module("myApp",[]);
        app.controller('check', function($scope){
           $scope.getLength=function(number){
               return new Array(number);
             };
           $scope.getLengthData=function(){
               return new Array($scope.myData.length/2);
             };
              $scope.getArray=function(index){
               var temparray;
                  temparray= $scope.myData.slice(index*4,index*4+4);
              return temparray;
             }
         $scope.myData = [
             {
                 seatno:'1',
                 name:'Cristina Tooker',
                 ticketnNo:"abc456",
                 insuranceNo:34
             },
             {
                 seatno:'2',
                 name:'Malanie Laparga',
                 ticketnNo:"abc231",
                 insuranceNo:90
             },
             {
                 seatno:'3',
                 name:'Luna Marie',
                 ticketnNo:"abc324",
                 insuranceNo:35
             },
             {
                 seatno:'4',
                 name:'Hayes Dave',
                 ticketnNo:"abc221",
                 insuranceNo:91
             },
             {
                 seatno:'5',
                 name:'Scott Tooker',
                 ticketnNo:"abc453",
                 insuranceNo:36
             },
             {
                 seatno:'6',
                 name:'Malanies Santos',
                 ticketnNo:"abc241",
                 insuranceNo:93
             },
             {
                 seatno:'7',
                 name:'Luna Marie Landiola',
                 ticketnNo:"abc322",
                 insuranceNo:39
             },
             {
                 seatno:'8',
                 name:'David Marine',
                 ticketnNo:"abc222",
                 insuranceNo:92
             },
         ];
         }); 

      </script>
      </body>

    </html>

在angularjs中设置4列的表格模板

2 个答案: