Display multiple elements on same line with angular-js

Question

Below code displays data within an ng-repeat . I'm attempting to include a new line after every 5 elements are displayed :

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var json = {
    "modules":
        [
                {
                   "category":"Sport",
                   "title":"Sport New Title",
                   "description" : "Sport This is description",
                   "fullDescription" : "fullDescription Sport This is description",
                    "hrefLink" : "http://www.google.com",
                    "hrefTitle" : "Google",
                    "dateAdded" : "11-11-11"
                },

                                {
                   "category":"News",
                   "title":"Scala New Title",
                   "description" : "Scala This is description",
                    "fullDescription" : "fullDescription Sport This is description",
                    "hrefLink" : "http://www.google.com",
                    "hrefTitle" : "Google",
                    "dateAdded" : "11-11-11"
                },

                                {
                   "category":"Scala",
                   "title":"Scala New Title",
                   "description" : "Scala This is description",
                    "fullDescription" : "fullDescription Sport This is description",
                    "hrefLink" : "http://www.google.com",
                    "hrefTitle" : "Google",
                    "dateAdded" : "11-11-11"
                }


        ]
  };

  $scope.ocw = json;


});

    <!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
  <script src="app.js"></script>
</head>

Search: <input ng-model="searchText">

<body ng-controller="MainCtrl">
 <table class="table table-bordered" ng-repeat="module in ocw.modules | filter:searchText">
    <td>
        <h3 class="moduletitle">{{ module.category }} {{$index}}</h3>
        <p>{{ module.title }}</p>
        <p>{{ module.description }}</p>
        <p><a href="{{ module.hrefLink }}"> {{ module.hrefTitle }}</a></p>
    </td>
    <div ng-if={{$index}}" % 5 === 0">
      <tr></tr>
    </div> 

</div>
</table>
</body>
</html>

But problem is <td> elements are wrapped by <tr> . This appears to be generated by ng-repeat. Can these td elements be displayed on one row and separated every 5 elements ?

Plunkr : http://plnkr.co/edit/MnSD7u1pCKV7kTQkGFPT?p=preview

`ng-if` is wrong try `ng-if"$index % 5 === 0"` In the if statement you dont need to use `{{}}` I dont know if this solves your problem. — Tiago, Apr 13 '15 at 21:47
@BangoTango how to prevent elements generated as part of ng-repeat ? — blue-sky, Apr 13 '15 at 21:49
it need to be outside the `ng-repeat`. With the `ng-repeat` like this you are creating 5 tables, is this what you want? — Tiago, Apr 13 '15 at 21:54

score 0 · Answer 1 · edited May 23 '17 at 12:28

Try this : http://plnkr.co/edit/D7XyPDM8uJzArqcaWtJf?p=preview

First, you divide your actual JSON into rows by using a chunk methods (as seen here )

function chunk(arr, size) {
    var newArr = [];
    for (var i=0; i<arr.length; i+=size) {
      newArr.push(arr.slice(i, i+size));
    }
    return newArr;
}

json.modules = chunk(json.modules, 5);

Then in your HTML use two ng-repeat. One in the TR for the rows and one in the TD for each element of the row :

<table class="table table-bordered">
<tr ng-repeat="(rowIndex, row)in ocw.modules">
    <td ng-repeat="module in row | filter:searchText">
          <h3 class="moduletitle">{{ module.category }} {{$index+(rowIndex*5)}}</h3>
          <p>{{ module.title }}</p>
          <p>{{ module.description }}</p>
          <p><a href="{{ module.hrefLink }}"> {{ module.hrefTitle }}</a></p>
    </td>
   </tr>
</table>

The answer by m59 that I have linked also shows how to rejoin your data if you need to use it "unchucked".

Display multiple elements on same line with angular-js

1 Answers1