I am trying to pull all items from my array called 'collections'. When I input the call in my html I see only the complete code for the first item in the array on my page. I am trying to only pull in the 'edm.preview' which is the image of the item. I am using Angular Firebase and an api called Europeana. My app allows the user to search and pick which images they like and save them to 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 the html:
<ul id="collections" ng-repeat="item in collections">
<li ng-repeat="item in collections">{{item.edmPreview}}</li>
</ul>
First, remove the outer ng-repeat. You want to only add the ng-repeat directive to the element which is being repeated, in this case <li>.
Second, from your AngularJS code, it looks like you want to loop over users.currentUser.collections and not just collections:
<ul id="collections">
<li ng-repeat="item in users.currentUser.collections">{{item.edmPreview}}</li>
</ul>
And third, you're defining the function $scope.addSomething twice in your JavaScript code. Right now, the second function definition (which, incidentally, should be changed to update $scope.users.currentUser.collections as well) will completely replace the first.
Related
Hi I am trying to dynamically add a class to an element that is updated on the view.
http://jsfiddle.net/9s1rfwa8/7/
<div ng-app>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos" class="bigfont todo done-{{todo.done}}"> <span>{{todo.text}}</span>
</li>
</ul>
</div>
function TodoCtrl($scope) {
$scope.todos = [{
text: 'learn angular',
done: true
}, {
text: 'build a demo angular appsdfsdfsf',
done: false
}, {
text: 'build an awesome angular app',
done: false
}];
}
How do I add a class to the ng-repeat element that is only changed and not to others.
I am trying to give it a flip effect to the elements that changes.
Ng-repeat will duplicate element that is repeated. If you want to apply class to only one of the element repeated, then you need to add a condition e.g. $index === 0 to ng-class.
ng-class={'first-item-class': $index === 0}
this will apply to the first element only. Use any kind of condition logic to identify its the one you want to apply to.
You can use a custom filter for this, custom filter will be executed whenever there is a change.
For example you can change done property inside your todo object every time user clicks on the row and use the value of todo.done to set class inside your filter
html
<li ng-repeat="todo in todos | filter:handleChange"
class="bigfont todo done-{{todo.done}} {{todo.class}}"
ng-click="todo.done = !todo.done">
<span>{{todo.text}}</span>{{todo.class}}
</li>
js
$scope.handleChange = function(row){
if(!row.done){
row.class = '';
}
else{
row.class = 'changed'
}
return true;
}
this should give you a general idea on how to approach your problem, you can find a working sample in the following plunker.
Demo
I am trying to set the position property on an object that is inside an array being used by ng-repeat.
<div ng-repeat="item in items track by $index" ng-init="pos = $index + 1; item.position = pos">
<span>{{pos}}</span>
</div>
Initially it sets the property fine, however, anytime the HTML is recompiled after a model (I add/remove/move elements in the array) change the pos variable is set properly and correct position is displayed. However it will not update item.position !
Interesting hack:
<li ng-repeat="item in items track by $index">
{{item.position=$index+1}}
<span>{{item.position}}</span>
</li>
Wouldn't suggest it in production though
DEMO
The assignment of properties really doesn't belong in your template. You should ideally be assigning the position property in your controller. You could use something like this in your controller
$scope.$watchCollection('items', function() {
angular.forEach($scope.items, function(item, idx) {
item.position = idx + 1;
});
})
however I'd really question the need to do so. The item's position in the array provides all the information you need.
Demo ~ http://plnkr.co/edit/H5JbsABEdceSXENFFBBO?p=preview
I need to do app,which doing something like that:
One web page separated on 2 tabs.
In first tab we have list of items. If you click on item it should be transferred to another tab and should be hidden on first tab.
Tools to do this thing is AngularJS.
Any ideas about that? Sorry for this question. I'm noobie in AngularJS.
Here's a really basic example of how you could implement your idea with AngularJS:
Tabs
one easy way to create tabs is to create the markup and use your controller to hold a reference to which tab to show:
// in the controller
$scope.currentTab = 1;
// in the markup
<li class="tab" ng-show="currentTab === 1">
... tab contents
</li>
... repeat for as many tabs as you want
you could then change the tab inside an ng-click directive in your page markup:
// in the markup
<a ng-click="currentTab = 1">change to tab 1</a>
Items
to show items in your tab first create the items in your controller:
// in the controller
$scope.tab1Items = [1, 2, 3, 4, 5];
then display in your tab:
// in the markup
<li class="tab">
<div ng-repeat="item in tab1Items">{{ item }}</div>
...
</li>
Moving the items
This can be done with a function in ng-click that passes the item from one array of items to another:
// in the controller
$scope.moveItem = function(item) {
if ($scope.tab1Items.indexOf(item) > -1) {
$scope.tab1Items.splice($scope.tab1Items.indexOf(item), 1);
$scope.tab2Items.push(item);
}
else {
$scope.tab2Items.splice($scope.tab2Items.indexOf(item), 1);
$scope.tab1Items.push(item);
}
}
// in the markup
<div ng-repeat="item in tab1items" ng-click="moveItem(item)">
...
The concept here is to create a page with one controller that maintains current tab state, as well as the items to display in those tabs. Since you have access to all the items in the same scope it's easy to manipulate and pass those items from one tab to another.
Here's a link to a basic working example in plnkr: http://plnkr.co/edit/PjSXI0JH4uQ1OW8u3f2z?p=preview
I am working on setting up angular pagination on a table that I am creating.
I have worked through the docs. However, I am not seeing how to connect the pagination to the table. My pagination size is matching the array size. Their are the right number of button links to page the page length. However, my table is still at full length making it impossible for me to test my pagination.
Here is my table body
<tbody>
<tr ng-repeat="drink in editableDrinkList | orderBy:'-date'">
<td>[[drink.name]]</td>
<td>[[drink.date |date: format :timezone]]</td>
<td>[[drink.caffeineLevel]]</td>
<td>
<a ng-click="delete(drink._id)">
<i style="font-size:18px; margin-right:5%" class="fa fa-times"></i>
</a>
<a href="" ng-click="update(drink)">
<i style="font-size:22px;" class="fa fa-pencil-square-o"></i>
</a>
</td>
</tr>
</tbody>
I have set my table body outside of the table tag I tried it inside but my pagination controls did not appear.
Here is my pagination
<pagination
total-items="totalItems"
ng-model="currentPage"
items-per-page="itemsPerPage"
ng-change="pageChanged()"
ng-click="setPage(currentPage)">
</pagination>
I also set up a p tag to make sure the tabs are responding
<div>
<p>total Items [[totalItems]]</p>
<p>itemsPerPage [[itemsPerPage]]</p>
<p>current page [[currentPage]]</p>
</div>
The total items, items per page and current page inside of the paragraphare all responding to each click on the pagination controller. However the table is not changing.
Here is my controller
var editabledrinkSet = function(){
editableArray = [];
DrinkLibrary.getAllDrinks().success(function(data){
for (var i = 0; i < data.length; i++) {
if(data[i].editable) {
editableArray.push(data[i])
};
};
$scope.currentPage = 1;
$scope.totalItems = editableArray.length;
$scope.itemsPerPage =10;
$scope.maxSize = 3;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
}
$scope.pageChanged = function() {
$log.log('Page changed to: ' + $scope.currentPage);
};
$scope.editableDrinkList = editableArray;
});
};
When I get it working I will move most of it out into a directive. I just want to get it set up first.
You can do this with a custom filter.
Add a Custom Filter to ngRepeat
You need to be able to tell the repeat which index is going to be the starting point for each page and how many items to include on the page. You can do this by creating a simple filter (I called it pages). This filter is going to use the currentPage and itemsPerPage values that you already set up in your controller.
<tr ng-repeat="drink in editableDrinkList | orderBy:'-date' | pages: currentPage : itemsPerPage">
Create the Custom Filter
To create a custom filter you pass in your name and then a factory function that returns a worker function. The worker function automatically receives the input array as its first value. The subsequent values are the ones you specified in your filter.
So the pages filter gets the input array and the two values passed to it (currentPage and pageSize). Then you'll just use Array.slice to return the new array to the repeat. Remember, filters are non-destructive. They aren't changing the actual scoped array. They are creating a new array for the repeat to use.
app.filter('pages', function() {
return function(input, currentPage, pageSize) {
//check if there is an array to work with so you don't get an error on the first digest
if(angular.isArray(input)) {
//arrays are 0-base, so subtract 1 from the currentPage value to calculate the slice start
var start = (currentPage-1)*pageSize;
//slice extracts up to, but not including, the element indexed at the end parameter,
//so just multiply the currentPage by the pageSize to get the end parameter
var end = currentPage*pageSize;
return input.slice(start, end);
}
};
});
Add the Pagination Directive to the Page
Here's the cleaned up version of the directive you'll add to your html. Don't use an kind of ngClick or ngChange on the pagination directive. ngModel is set to the currentPage variable so there's nothing else you have to do. Since currentPage is two-way bound via ngModel, when it changes the pagination directive will update as well as the pages filter, which will in turn update your repeated table rows.
<pagination
total-items="totalItems"
ng-model="currentPage"
items-per-page="itemsPerPage"
max-size="maxSize">
</pagination>
It's that simple. If you want to see a working demo, check the Plunker.
Plunker
My question in short
how do i manipulate the isolated scope created by ng-repeat inside of my controller?
To read the full problem i am having continue reading below:
I have a collection on timelines and each of them further has a collection of captures (essentially images).
HTML
<ul>
<li ng-repeat="timeline in timelines | filter:search | orderBy:'event_date':sort">
<ul ng-if="timeline.captures">
<li ng-repeat="captures in timeline.captures | limitTo:imageLimit">
<img ng-src="<% captures.capture_location %>">
</li>
</ul>
<a ng-click="(imageLimit = imageLimit + 1)">Load more</a>
</li>
</ul>
I want to limit the number of images being loaded on page load.. which i am able to do using limitTo
I want to load more images when the user clicks on 'Load more'. I am also able to do this by ng-click="(imageLimit = imageLimit + 1)
What i want to do:
I want to extract this out as a function
so that the following
Load more
becomes
Load more
To achieve this, i tried the following:
inside my controller
$scope.imageLimit = 1; // number of images to show initially on page load
$scope.loadMore = function() {
$scope.imageLimit += 1;
};
Now what is happening is that this this not create the imageLimit model inside the repeated scope (if you understand what i mean) but instead creates the imageLimit model at the controller scope. This is also the expected behaviour but i want to know how do i manipulate the scope within the repeated timeline (isolated scope for that timeline) inside my controller?
If I understand correctly, you want to be able to loadMore() for each timeline, independantly of the other ones. The loadMore() function should thus take the timeline as argument, and the limit should be a property of the timeline:
angular.forEach($scope.timelines, function(timeline) {
timeline.imageLimit = 10; // default value
});
$scope.loadMore(timeline) {
timeline.imageLimit++;
}
And in your template:
<li ng-repeat="captures in timeline.captures | limitTo:timeline.imageLimit">
...
<a ng-click="loadMore(timeline)">Load more</a>