javascript - 如何将数组元素拆分为多个 tr 语句

Question

在这个 fiddle 中: http://jsfiddle.net/U3pVM/17899/

我在 ng-repeat 中显示多个 tr 元素。如何每行有三个 td 元素？我是否需要内部 angularjs ng-repeat 并拆分 iconDets 数组？

HTML:

<div ng-app>
<div ng-controller="MainCtrl">
 <table class="table table-bordered" cellspacing="1">
 <tr ng-repeat="d in dets">
    <td class="col-md-3">
          <div class="header"><a href="{{ d.title }}" target="_blank">{{d.title}}</div>

          <div class="title truncated-anchors"><a title="d.title" href='test");'>{{d.title}}</a></div>

          <div class="date">test</div>
   </td>
 </tr>
 </table>
</div>
    </div>

CSS:

/* Latest compiled and minified CSS included as External Resource*/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');

.table-bordered {
    border: none;
}

.filter {
    /* margin-left:auto;
     margin-right:auto;
     */
    background-color: white;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
    width: 200px;
    padding-left: 20px;
}

.center {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
}

table {
    border-collapse: separate;
    border-spacing: 20px;
}

td {
    /* padding: 5px 10px 5px 5px;
     */
    background-color: #F0F8FF;
}

.header {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 20px;
    padding-bottom: 5px;
    color: black;
}

.title {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
}

.link {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
    padding-bottom: 10px;
}

.date {
    padding-top: 10px;
    font-style: italic;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 12px;
}

.truncated-anchors {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

function MainCtrl($scope) {

    var iconDets = new Array();
    var icon1 = new Object();
    icon1.title = "tester";
    var icon2 = new Object();
    icon2.title = "tester";

    iconDets.push(icon1);
    iconDets.push(icon1);
    iconDets.push(icon1);
    iconDets.push(icon1);
    iconDets.push(icon1);
    iconDets.push(icon1);

    $scope.dets = iconDets;

    var jsonString = JSON.stringify(iconDets);

  };

更新:

预期结果:

更新2:

iconDet数组的内容不应更改

Answer 1

您可以split the array in chuncks尺寸3。现在你有了一个数组的数组。第一级迭代将在 tr 上进行，第二级迭代将在 td 上进行。

请参阅下面的示例:

function MainCtrl($scope) {

  var iconDets = new Array();
  var icon1 = new Object();
  icon1.title = "tester1";
  var icon2 = new Object();
  icon2.title = "tester2";
  var icon3 = new Object();
  icon3.title = "tester3";
  var icon4 = new Object();
  icon4.title = "tester4";
  var icon5 = new Object();
  icon5.title = "tester5";
  var icon6 = new Object();
  icon6.title = "tester6";
  var icon7 = new Object();
  icon7.title = "tester7";

  
  iconDets.push(icon1);
  iconDets.push(icon2);
  iconDets.push(icon3);
  iconDets.push(icon4);
  iconDets.push(icon5);
  iconDets.push(icon6);
  iconDets.push(icon7);


  var i, j, temparray = [], chunk = 3;
  for (i = 0, j = iconDets.length; i < j; i += chunk) {
    temparray.push(iconDets.slice(i, i + chunk));
  }

  $scope.dets = temparray;

  var jsonString = JSON.stringify(iconDets);

};

/* Latest compiled and minified CSS included as External Resource*/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
 .table-bordered {
  border: none;
}
.filter {
  /* margin-left:auto;
	 margin-right:auto;
	 */
  background-color: white;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  width: 200px;
  padding-left: 20px;
}
.center {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}
table {
  border-collapse: separate;
  border-spacing: 20px;
}
td {
  /* padding: 5px 10px 5px 5px;
	 */
  background-color: #F0F8FF;
}
.header {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 20px;
  padding-bottom: 5px;
  color: black;
}
.title {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}
.link {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  padding-bottom: 10px;
}
.date {
  padding-top: 10px;
  font-style: italic;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 12px;
}
.truncated-anchors {
  display: inline-block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
  <div ng-controller="MainCtrl">
    <table class="table table-bordered" cellspacing="1">
      <tr ng-repeat="det in dets">
        <td class="col-md-3" ng-repeat="d in det">
          <div class="header"><a href="{{ d.title }}" target="_blank">{{d.title}}</div>
         
          <div class="title truncated-anchors"><a title="d.title" href='test");'>{{d.title}}</a>
          </div>

          <div class="date">test</div>
        </td>
      </tr>
    </table>
  </div>
</div>