Question

在这个小提琴中： 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);

  };

更新：

预期结果：

Update2：

iconDet数组的内容不应更改

Answer 1

您可以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); };上。

见下面的例子：

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

query3

＆＃13;

split the array in chuncks

如何在多个tr语句上拆分数组元素

1 个答案: