I'm having trouble getting started with the ngInfiniteScroll directve. I've created a scope called movies which has about 150 objects of movies with titles and release dates. Using a ng-repeat I show the objects in a container element.
I've tried to create a sample app in plunker, but when I view the app it just shows all the records and the ngInfiniteScroll directive doesn't seem to do anything special.
http://plnkr.co/edit/bohgyL?p=preview
<div infinite-scroll='myPagingFunction()' infinite-scroll-distance='3'>
<div class="repeat" ng-repeat="movie in movies | orderBy: '-release_date'">
<h2> {{ movie.title }} </h2>
<h2> {{ movie.release_date }} </h2>
</div>
</div>
The desired result is that when you view the app you only see the results that are in your viewport, and when you scroll down additional results are inserted into the viewport. Like this.
So what am I overlooking here?
You are not showing us any code for myPagingFunction(), so I assume that to be the problem. That function doesn't exist out of the box, you need to make it. Refer to the example shown here: https://binarymuse.github.io/ngInfiniteScroll/demo_basic.html
If you do have a paging function, please show it to us so we can help debug your code.
Related
I had some code
https://jsfiddle.net/Dimetrius/58917Ldt/
And I need help. I need filtering by select and checkbox and then show result by click on button. But all of the list needs to be showed at start.
https://jsfiddle.net/58917Ldt/2/
<div ng-repeat="wine in (main.wines | filter: main.filterByCategory
|filter:model.names ) as filteredWines" ng-if="main.tab==true">
{{ wine.name }} <i>({{ wine.category }})</i>
</div>
I have created fiddle but it is not very practical though it meets your requirements.
I'm creating a website with multiple tabs, and one of them is listing elements, it's the Product tab.
I've got a problem with "ng-repeat", I want to fill a HTML depending on a table of table in angular on the tab, it works fine on the first load, but if I go to another tab and then go again on the product tab, the "ng-repeat" repeats once more and it stacks with the first one.
Example:
Firstload: an apple and a strawberry are loaded fine.
Secondload: I now have apple strawberry and apple strawberry
And so on.
<slick dots="true" prev-arrow="null" next-arrow="null" init-onload="true" data="productsTab">
<div class="productsPage scrollBar" ng-repeat="tab in productsTab">
<div class="productsProduct" ng-repeat="product in tab">
<div class="productsProductTitle">{{product.name}}</div>
</div>
</div>
</slick>
I can also say that I load my data from a factory that I get in controller this way:
productsFactory.build().then(function(facto) {
$scope.productsTab = facto;
});
Hope you can help me!
I think your problem is that init-onload. I am not sure what it does, but if it triggers the call to the controller in some way, it also triggers the promise every time you go back to the tab. You can cache the results from the promise inside the service. Here's an article from this site on how to cache promises:
Caching a promise object in AngularJS service
Hope this will help.
Here is example how to handle multiple ng-repeats, I hope this will help you.
http://plnkr.co/edit/TfGMm1SgpRmgFSTuTuE0?p=preview
<script>
var app=angular.module('myapp',[])
app.controller('demo',function($scope){
$scope.products={
product:[{
name:'abc'
}]
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="demo">
<div ng-repeat="product in products">
<div ng-repeat="p in product">
<span>{{p.name}}</span>
</div>
</div>
</body>
I noticed from the docs I found here https://github.com/vasyabigi/angular-slick that there are no parenthesis on on-init=true. Not sure if that matters.
When I have issues with arrays not resetting I use angular.copy() an empty list variable before loading to the scope. That way I know the array is empty before I add anything to it.
I'd like to show element only one time within ng-repeat.
My code bellow doesn't work because "Event of today" is shown each time when an event is starting today...
My code :
<div class="line" ng-repeat="event in events">
<!-- h4 only once if condition is passed -->
<h4 ng-if="event.start.getTime() === today.getTime()">Event of today</h4>
<!-- h4 only once if condition is passed -->
<h4 ng-if="event.start.getTime() === tomarrow.getTime()">Event of tomarrow</h4>
<div class="event-body">
<h3>{{event.categoryName}} : {{event.title}}</h3>
</div>
</div>
Just create a filtered version of the events array and display that. You can make a function that refilters it, and call that whenever there's a change that needs it to update (putting it in a $scope.$watch function seems the easiest way to do this). It seems low-tech, but it really gives you the most control over what you end up seeing.
Here is a very stripped-down Plunker of this, just showing some simple filtering: Example.
you can see part of my code:
<ul>
<li ng-repeat="commentItem in comments track by $index">
<div style="float: left; width: 15%;;">
<img width="100%" src="{{commentItem.headImage}}">
</div>
</li>
</ul>
<ion-infinite-scroll ng-if="comment.loadMore" on-infinite="loadMoreComments()">
</ion-infinite-scroll>
when the 'comments' contains less data ,all looks normal.But when there are lots of data in the array(maybe 100 or more),the images will be showed in disorder.For example, the image should be in the third "li" will be showed in the fourth "li".Could anyone tell me why,please!
PS. I use the ionic.bundle.js,but I dont know it will cause something wrong or not. And when the event of ion-infinite-scroll be tiggered,I will push the new data into the "comments" array.
Tracking by $index is not a good idea. Can you track by commentItem.id (or another unique identifier on the commentItem) instead? I'm not sure if that will solve the problem but looking at that code snippet, that's the first thing I would try.
I'm new to masonry with angular. i have tried to get masonry working with angular up to a certain extend and im facing few issues with it right now. Below given link is what i have done so far and the following are the two issues facing:
<div ng-controller="MainCtrl">
<div class="grid" masonry="true" column-width="460">
<div ng-repeat="item in items" class="item {{item.class}}">
<div><h1>{{item.name}}</h1></div>
<br /> <span>Age: {{item.age}}</span>
<br /> <span>Company: {{item.company}}</span>
</div>
</div>
</div>
Link to jsfiddle for my solution
instance 1
When there is enough space the smaller brick does not get adjusted. E.g. After "Collin Alston" i need to have "Jasmine Rollins" and likewise. How would i accomadate this change? (see for image below as well)
instance 2
Why is it that "style" attribute gets applied to child elements? i need the style to be applied to "item w1 masonry-brick" and not child div's.
I had in instance 1 and changed it to for instance 2 to show the two problems im facing. Hope to get some answers to work my way out. Thank you in advance.
Update 1:
I managed to get masonry working with angular to this extend. Check this out http://jsfiddle.net/h5jfd1wm/38/
But still there are some empty spaces when i resize the window. It's like some bricks from the bottom can fill up those empty spaces. If you can help me out here.