Question

我在控制器中有一个变量，用于保存应该在表中传递的数据。 td单元格中有值1到20.我想要做的是当seatno为1时，除了数字1 td单元格外，还应显示名称。当没有可用的seatno或名称时，除了值之外的td单元格应为空白。像这样：http://s4.postimg.org/carj4wt4d/Screenshot_from_2015_01_12_14_36_08.jpg

到目前为止我所做的是：

 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);

    var tdCells = [];
      for (var i = 0; i < $scope.seatArr.length; i++ ) {
        if (i % 8 == 0) tdCells.push([]);
          tdCells[tdCells.length-1].push($scope.seatArr[i]);
      }
        return $scope.tdCells = tdCells;

     $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
         },
     ];
     });

<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 tdCells">
      <td ng-repeat="td in tr">
        {{ td }}
        <!-- After seven iterations a new `<tr>` should be aded -->
      </td>
    </tr>
 </tbody>
</table>

感谢。

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

从评论中看到版本后：是的，最好有两个表。可能最简单的方法是过滤每个表中的ng-repeat。

将数据插入具有复杂td单元格的表中

1 个答案: