Ng-repeat doesn't seem to work
I am trying to pull all the elements from my array called "collection". When I enter a call into my html, I only see the complete code for the first element in the array on my page. I am trying to only click on "edm.preview" which is the image of the element. I am using Angular Firebase and an api called Europeana . My app allows the user to search and select which images they like and save them for that specific user.
here is the js:
$scope.users = fbutil.syncArray('users');
$scope.users.currentUser.collections = fbutil.syncArray('collections');
$scope.addSomething = function (something) {
var ref = fbutil.ref('users');
ref.child($rootScope.currentUser.uid).child('collections').push(something);
}
$scope.addSomething = function(item) {
if( newColItem ) {
// push a message to the end of the array
$scope.collections.$add(newColItem)
// display any errors
.catch(alert);
}
};
and html:
<ul id="collections" ng-repeat="item in collections">
<li ng-repeat="item in collections">{{item.edmPreview}}</li>
</ul>
source to share
Delete the outer one first ng-repeat
. You want to add a directive ng-repeat
to the repeating element, in this case <li>
.
Second, from your AngularJS code, it looks like you want to iterate over users.currentUser.collections
, not just collections
:
<ul id="collections">
<li ng-repeat="item in users.currentUser.collections">{{item.edmPreview}}</li>
</ul>
And third, you define a function twice $scope.addSomething
in your JavaScript code. Currently, the second function definition (which, by the way, needs to be changed to update $scope.users.currentUser.collections
) will completely replace the first.
source to share