How do i return and display data 3 at a time? (Using Firebase and Angular)

Question

I've got a problem that I'm not sure how to solve using the "Angular way". I want to display returned data in rows of three. Basically I have a template that needs to be used like this:

<div class="row">
- data item 1
- data item 2
- data item 3
</div>

<div class="row">
- data item 4
- data item 5
- data item 6
</div>

My database (firebase) looks like this:

myUsers
------- 
{ name: "John", age: 33 }
{ name: "Ravi", age: 26 }
{ name: "Kate", age: 29 }
{ name: "Steve", age: 29 }
{ name: "Randall", age: 29 }
{ name: "Kevin", age: 32 }

And I fetch the users by using this code:

var myUsersUri = FIREBASE_URI + 'web/data/myUsers';
var ref = new Firebase(myUsersUri);
var query = ref.orderByChild("name");
var myUsers = $firebaseArray(query);
...
$scope.myUsers = myUsers;

This is where I'm stuck. The only thing I know how to do so far is display this data using ng-repeat, like this:

<div class="user" ng-repeat="(id, myUser) in myUsers">
{{ myUser.name }}
</div>

But I need it displayed in rows of three. Does anyone know how I would go about solving it.

I think the solution is to put the data into groups BEFORE I put it into $scope, so have a $scope.groups which is a collection of items split into rows.

Answer 1

You might wanna check out this answer. It's an easy solution that does not require data manipulation and you can just change one variable if you need more/less rows.

Here's the code adjusted to your situation:

The HTML:

<div class="label" ng-repeat="(id, myUser) in myUsers"
    ng-class="{'new-row': startNewRow($index, columnBreak) }">
    {{ myUser.name }}
</div>

The CSS:

.label {
    float: left;
    text-align: left;
}
.new-row {
    clear: left;
}

The JavaScript:

$scope.columnBreak = 3; //Max number of colunms
$scope.startNewRow = function (index, count) {
    return ((index) % count) === 0;
};