与复杂的td单元格将数据插入表 [英] Insert data into table with complicated td cells

查看：172
本文介绍了与复杂的td单元格将数据插入表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在控制器持有应在表中传递的数据的变量。还有在TD细胞值1到20。我想要做的是当seatno为1号应该除了1号TD手机中显示的名称。当没有可用seatno或命名之外的值td单元格应为空。像这样： http://s4.postimg.org/carj4wt4d/Screenshot_from_2015_01_12_14_36_08.jpg

我所做的迄今：

\r
\r

VAR应用= angular.module（对myApp，[]）;\r
    app.controller（'检查'，函数（$范围）{\r
    $ scope.totalSeats = 20;\r
    $ scope.seatArr = [];\r
      对于（VAR I = 1; I＆LT; = $ scope.totalSeats;我++）{\r
        $ scope.seatArr.push（ⅰ）;\r
      }\r
\r
    的console.log（$ scope.seatsArr）;\r
\r
    变种tdCells = [];\r
      对于（VAR I = 0; I＆LT; $ scope.seatArr.length;我++）{\r
        如果（ⅰ％8 == 0）tdCells.push（[]）;\r
          tdCells [tdCells.length-1] .push（$ scope.seatArr [I]）;\r
      }\r
        返回$ scope.tdCells = tdCells;\r
\r
     $ scope.myData = [\r
         {\r
             sea​​tno：'1'，\r
             名称：媚兰，\r
             ticketnNo：abc456，\r
             insuranceNo：34\r
         }，\r
         {\r
             sea​​tno：'2'，\r
             名称：'约瑟法，\r
             ticketnNo：abc231，\r
             insuranceNo：90\r
         }，\r
         {\r
             sea​​tno：'17'，\r
             名称：露娜玛丽'，\r
             ticketnNo：abc324，\r
             insuranceNo：35\r
         }，\r
         {\r
             sea​​tno：5，\r
             名称：亚娜，\r
             ticketnNo：abc221，\r
             insuranceNo：91\r
         }，\r
         {\r
             sea​​tno：'18'，\r
             名称：'斯科特·图克，\r
             ticketnNo：abc453，\r
             insuranceNo：36\r
         }，\r
         {\r
             sea​​tno：'6'，\r
             名称：'Malanies桑托斯，\r
             ticketnNo：abc241，\r
             insuranceNo：93\r
         }，\r
         {\r
             sea​​tno：'20'，\r
             名称：露娜玛丽Landiola'，\r
             ticketnNo：abc322，\r
             insuranceNo：39\r
         }，\r
         {\r
             sea​​tno：'6'，\r
             名称：'伊丽莎，\r
             ticketnNo：abc222，\r
             insuranceNo：92\r
         }，\r
     ];\r
     }）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
  ＆LT;机身NG-应用=对myAppNG控制器=检查＆GT;\r
  ＆LT;表边框=1WIDTH =100％＆GT;\r
  ＆LT;跨度COLGROUP =7＆GT;＆LT; / COLGROUP＆GT;\r
   ＆LT;＆TBODY GT;\r
    ＆LT; TR NG重复=TR在tdCells＆GT;\r
      ＆LT; TD NG重复=TD在TR＆GT;\r
        {{TD}}\r
        ＆LT;！ - 经过七年的迭代一个新的`＆LT; TR＆GT;`应该交锋 - ＆GT;\r
      ＆LT; / TD＆GT;\r
    ＆LT; / TR＆GT;\r
 ＆LT; / TBODY＆GT;\r
＆LT; /表＆gt;

\r

\r
\r

感谢。


解决方案

您可以将数据重新排列，以这样的事情，直接与所有需要的参数工作：

\r
\r

VAR应用= angular.module（对myApp，[]）;\r
app.controller（'检查'，函数（$范围）{\r
  $ scope.totalSeats = 20;\r
  $ scope.seatArr = [];\r
  对于（VAR I = 1; I＆LT; = $ scope.totalSeats;我++）{\r
    $ scope.seatArr.push（ⅰ）;\r
  }\r
\r
  的console.log（$ scope.seatsArr）;\r
\r
  $ scope.myData = [{\r
    sea​​tno：'1'，\r
    名称：媚兰，\r
    ticketnNo：abc456，\r
    insuranceNo：34\r
  }，{\r
    sea​​tno：'2'，\r
    名称：'约瑟法，\r
    ticketnNo：abc231，\r
    insuranceNo：90\r
  }，{\r
    sea​​tno：'17'，\r
    名称：露娜玛丽'，\r
    ticketnNo：abc324，\r
    insuranceNo：35\r
  }，{\r
    sea​​tno：5，\r
    名称：亚娜，\r
    ticketnNo：abc221，\r
    insuranceNo：91\r
  }，{\r
    sea​​tno：'18'，\r
    名称：'斯科特·图克，\r
    ticketnNo：abc453，\r
    insuranceNo：36\r
  }，{\r
    sea​​tno：'6'，\r
    名称：'Malanies桑托斯，\r
    ticketnNo：abc241，\r
    insuranceNo：93\r
  }，{\r
    sea​​tno：'20'，\r
    名称：露娜玛丽Landiola'，\r
    ticketnNo：abc322，\r
    insuranceNo：39\r
  }，{\r
    sea​​tno：'6'，\r
    名称：'伊丽莎，\r
    ticketnNo：abc222，\r
    insuranceNo：92\r
  }];\r
\r
  变种tdCells = [];\r
  对于（VAR I = 0; I＆LT; $ scope.seatArr.length;我++）{\r
    如果（I％7 == 0）\r
      tdCells.push（[]）;\r
    VAR数据= $ scope.seatArr [I]\r
    为（在$ scope.myData变种D）{\r
      如果（$ scope.myData [D]。.seatno == $ scope.seatArr [I]）{\r
        数据= $ scope.myData [D]。。名称;\r
        打破;\r
      }\r
    }\r
    tdCells [tdCells.length - 1] .push（数据）;\r
  }\r
  $ scope.rows = tdCells;\r
\r
\r
}）;

\r

TD {\r
  宽度：10％\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆LT;机身NG-应用=对myAppNG控制器=检查＆GT;\r
  ＆LT;表边框=1WIDTH =100％＆GT;\r
    ＆LT;跨度COLGROUP =7＆GT;＆LT; / COLGROUP＆GT;\r
    ＆LT;＆TBODY GT;\r
      ＆LT; TR NG重复=TR行＆GT;\r
        ＆LT; TD NG重复=TD在TR＆GT;\r
          {{TD}}\r
        ＆LT; / TD＆GT;\r
      ＆LT; / TR＆GT;\r
    ＆LT; / TBODY＆GT;\r
  ＆LT; /表＆gt;\r
  ＆LT; /身体GT;

\r

\r
\r

看到从注释的版本后：是的，这可能是最好的有两个表。也许最简单的将是筛选 NG-重复在每个表中。

I have a variable in controller that holds the data which should be passed in the table. There are value in td cells 1 to 20. I want to do is when the seatno is number 1 the name should be displayed besides the number 1 td cell. And when there is no available seatno or name the td cells besides the value should be blank. Like this: http://s4.postimg.org/carj4wt4d/Screenshot_from_2015_01_12_14_36_08.jpg

What I've done so far is: 

 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>

Thanks.

解决方案

You can rearrange the data to something like this, working directly with all the needed parameters:

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>

After seeing the version from the comments: yes, it might be the best to have two tables. Probably the easiest would be to filter the ng-repeat in each table.

这篇关于与复杂的td单元格将数据插入表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆