Question

我有一个数据，我希望它们显示在表格中，如下所示：

http://s7.postimg.org/yy88qdhhn/seating_Manifest.jpg

如何显示座位旁边的人名？我应该创建2个表，一个表是否为座位号，另一个表是否为乘客的名字然后使用css合并它们？但我知道有一种解决方案可以在不使用css的情况下显示它们。谢谢！

这是下面的代码：

var app = angular.module("myApp", []);
app.controller('check', function($scope) {
  $scope.totalSeats = 20;
  $scope.seatArr = [];
  for (var i = 1; i <= $scope.totalSeats; i++) {
    $scope.seatArr.push(i);
  }

  console.log($scope.seatsArr);

  $scope.myData = [{
    seatno: '1',
    name: 'Melanie',
    ticketnNo: "abc456",
    insuranceNo: 34
  }, {
    seatno: '2',
    name: 'JOsefa',
    ticketnNo: "abc231",
    insuranceNo: 90
  }, {
    seatno: '17',
    name: 'Luna Marie',
    ticketnNo: "abc324",
    insuranceNo: 35
  }, {
    seatno: '5',
    name: 'Jana',
    ticketnNo: "abc221",
    insuranceNo: 91
  }, {
    seatno: '18',
    name: 'Scott Tooker',
    ticketnNo: "abc453",
    insuranceNo: 36
  }, {
    seatno: '6',
    name: 'Malanies Santos',
    ticketnNo: "abc241",
    insuranceNo: 93
  }, {
    seatno: '20',
    name: 'Luna Marie Landiola',
    ticketnNo: "abc322",
    insuranceNo: 39
  }, {
    seatno: '6',
    name: 'Eliza',
    ticketnNo: "abc222",
    insuranceNo: 92
  }, ];

  var tdCells = [];
  for (var i = 0; i < $scope.seatArr.length; i++) {
    if (i % 7 == 0) 
      tdCells.push([]);
    var data = $scope.seatArr[i];
    for (var d in $scope.myData) {
      if ($scope.myData[d].seatno == $scope.seatArr[i]) {
        data = $scope.myData[d].name;
        break;
      }
    }
    tdCells[tdCells.length - 1].push(data);
  }
  $scope.rows = tdCells;


});

td {
  width: 10%
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="check">
  <table border="1" width="100%">
    <colgroup span="7"></colgroup>
    <tbody>
      <tr ng-repeat="tr in rows">
        <td ng-repeat="td in tr">
          {{ td }}
        </td>
      </tr>
    </tbody>
  </table>
  </body>

Answer 1

＆＃13;

var app = angular.module("myApp", []);
app.controller('check', function($scope) {
  $scope.totalSeats = 20;
  $scope.seatArr = [];
  for (var i = 1; i <= $scope.totalSeats; i++) {
    $scope.seatArr.push(i);
  }

  console.log($scope.seatsArr);

  $scope.myData = [{
    seatno: '1',
    name: 'Melanie',
    ticketnNo: "abc456",
    insuranceNo: 34
  }, {
    seatno: '2',
    name: 'JOsefa',
    ticketnNo: "abc231",
    insuranceNo: 90
  }, {
    seatno: '17',
    name: 'Luna Marie',
    ticketnNo: "abc324",
    insuranceNo: 35
  }, {
    seatno: '5',
    name: 'Jana',
    ticketnNo: "abc221",
    insuranceNo: 91
  }, {
    seatno: '18',
    name: 'Scott Tooker',
    ticketnNo: "abc453",
    insuranceNo: 36
  }, {
    seatno: '6',
    name: 'Malanies Santos',
    ticketnNo: "abc241",
    insuranceNo: 93
  }, {
    seatno: '20',
    name: 'Luna Marie Landiola',
    ticketnNo: "abc322",
    insuranceNo: 39
  }, {
    seatno: '6',
    name: 'Eliza',
    ticketnNo: "abc222",
    insuranceNo: 92
  } ];
  
  $scope.getName = function(number){
      console.log(number);
      for(var i=0;i<$scope.myData.length;i++){
          if(number == $scope.myData[i].seatno)
              return $scope.myData[i].name;
      }
       return '';
  };
  var tdCells = [];
  var primaryarray=-1;
  for(var i=0;i<$scope.totalSeats;i++){
     if(i%3 ===0){
      ++primaryarray;          
      tdCells[primaryarray] = [];
     }
    
    tdCells[primaryarray][tdCells[primaryarray].length] = i+1 ;        
            tdCells[primaryarray][tdCells[primaryarray].length] = 
        $scope.getName(i+1);                  
  }
  $scope.rows = tdCells;
  console.log($scope.rows);
});

＆＃13;

td {
  width: 10%
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="check">
  <table border="1" width="100%">
    <colgroup span="7"></colgroup>
    <tbody>
      <tr ng-repeat="tr in rows">
        <td ng-repeat="td in tr">
          {{ td }}
        </td>
      </tr>
    </tbody>
  </table>
  </body>

＆＃13;

var app = angular.module("myApp", []);
app.controller('check', function($scope) {
  $scope.totalSeats = 20;
  $scope.seatArr = [];
  for (var i = 1; i <= $scope.totalSeats; i++) {
    $scope.seatArr.push(i);
  }

  console.log($scope.seatsArr);

  $scope.myData = [{
    seatno: '1',
    name: 'Melanie',
    ticketnNo: "abc456",
    insuranceNo: 34
  }, {
    seatno: '2',
    name: 'JOsefa',
    ticketnNo: "abc231",
    insuranceNo: 90
  }, {
    seatno: '17',
    name: 'Luna Marie',
    ticketnNo: "abc324",
    insuranceNo: 35
  }, {
    seatno: '5',
    name: 'Jana',
    ticketnNo: "abc221",
    insuranceNo: 91
  }, {
    seatno: '18',
    name: 'Scott Tooker',
    ticketnNo: "abc453",
    insuranceNo: 36
  }, {
    seatno: '6',
    name: 'Malanies Santos',
    ticketnNo: "abc241",
    insuranceNo: 93
  }, {
    seatno: '20',
    name: 'Luna Marie Landiola',
    ticketnNo: "abc322",
    insuranceNo: 39
  }, {
    seatno: '6',
    name: 'Eliza',
    ticketnNo: "abc222",
    insuranceNo: 92
  }, ];

  var tdCells = [];
  for (var i = 0; i < $scope.seatArr.length; i++) {
    if (i % 7 == 0) 
      tdCells.push([]);
    var data = $scope.seatArr[i];
    for (var d in $scope.myData) {
      if ($scope.myData[d].seatno == $scope.seatArr[i]) {
        data = $scope.myData[d].name;
        break;
      }
    }
    tdCells[tdCells.length - 1].push(data);
  }
  $scope.rows = tdCells;


});

＆＃13;

td {
  width: 10%
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="check">
  <table border="1" width="100%">
    <colgroup span="7"></colgroup>
    <tbody>
      <tr ng-repeat="tr in rows">
        <td ng-repeat="td in tr">
          {{ td }}
        </td>
      </tr>
    </tbody>
  </table>
  </body>

＆＃13;

在特定td单元格位置向表格显示数据

1 个答案: