lundi 4 janvier 2016

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

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:

names: 
{ 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 know it probably involves directives, and what I was thinking was using directives to control what the database returns, like I can go.

<div class="row">
<myUsers start-at=0 end-at=2></myUsers>
</div>

<div class="row">
<myUsers start-at=3 end-at=5></myUsers>
</div>

But for this I would need to know how many users there are in total. And for some reason by start-at and end-at queries are not working either. Does anyone have a better idea?




Aucun commentaire:

Enregistrer un commentaire