I have a store webpage and I want to add product blocks when user scrolls down (by infinite scrolling).
Which method should I use to fetch data from server and add it to the dom?
I saw this fiddle for implementing infinite scrolling in angularjs (it runs a loadMore() function when user arrives to end of page), as mentioned above, blocks are store's product and every item should have different scope.
The problem is that I don't know how to structure data in a scope and adding more items to it by ajax requests in the loadMore() function.
My products template:
<section class="more-apps">
<h1>More recommendations</h1>
<div class="loadmore-these">
<!-- ajax requests will load more instances of these three templates -->
<div data-ng-include data-src="'products-template-1.html'"></div>
<div data-ng-include data-src="'products-template-2.html'"></div>
<div data-ng-include data-src="'products-template-3.html'"></div>
</div>
</section>
and every sub-template file is like this with some simple differences:
<section data-ng-repeat="i in [1,2,3,4]">
<h1 data-ng-bind-html="title"></h1>
<div data-ng-bind-html="about"></div>
</section>
Every product has different title and about variables in (it's own?) scope.
I suggest you go through the angularjs official tutorial (basically it's about what you want to do, list products from a webstore) , and specifically the step about $http and services :
http://docs.angularjs.org/tutorial/step_05
If you structure your service to download a range of products according to how much the user scrolled (as in the example you linked to) you should be set.
Related
I have a simple search form which I have it included in two different pages using ng-include directive. I would like to bind them both to the same scope in such a way that when the user navigates between the pages, they'll keep seeing the same search data they've entered in either of the copies.
I have managed to implement an untidy solution using rootScope, but would like to know if this can be implemented in a proper, cleaner way?
I also used root scope slove it, my layout below:
<div id="page-header" ng-include="'views/layouts/header.html'"></div>
<div id="content">
<div ui-view="content" ng-cloak></div>
</div>
<div id="page-footer" ng-include="'views/layouts/footer.html'"></div>
<div id="toastElement">
<ul id="toastBox"></ul>
</div>
header.html bound HeaderController, the functions in HeaderController include search, login, logout, register and both working on $rootScope. Is it helpful?
<div ng-repeat="item in CategorizedItems"
ng-if="CategorizedItems.length> 0"
class="row customRow itemBorder animated slideInLeft" >
{{item.name}}
</div>
I show the list of items in above div.
On click of a button, CategorizedItems are updated.
i.e
$scope.CategorySelected=function(categoryName){
$rootScope.CategorizedItems =[];
$rootScope.CategorizedItems = $rootScope.Items.filter(function(obj){
if(obj.category.name === categoryName)
return obj
});
}
This method is called.Now, when I go from one class to another, New items appear gracefully but items from previous category appear under the list of new items for a couple of seconds.
This is a common problem in Angular.
Most people do this ...
<div ng-if="false">
don't display me
</div>
and then at end of HTML ...
<script src=".....angular.min.js">
and expect the DIV to not appear. Of course it will initially appear in this scenario since it has no idea what ng-if means UNTIL angular is loaded.
Put your angular script include at top of page.
You may also wish to consider using ngCloak directive or CSS class, which is the documented way of resolving this issue (assuming script tag is at top of page).
If I have real problems with this then I might use $scope.readyToRender boolean variable in my controller to control when to display elements.
e.g. at end of controller code I would set it to true and wrap code in an ng-if='readyToRender'
I have a situation like I have to load infinite number of items to table. These information is coming from API. Currently its showing 10 records. I am trying to implement http://jsfiddle.net/U7Bz9/3126/. In my code ,
<div class="page page-table" id="MainWrap" data-ng controller="Ctrl1" >
// where all html codes are written
</div>
But in above given link they have not used controller. Controller is not passing to js. How to implement this?
In my application the index page is like
<div ng-if="isLoggedIn>
<div ng-view>
</div>
<div ng-if="!isLoggedIn">
<div ng-if="type==='admin'">
<div ng-view>
</div>
</div>
<div ng-if="type!=='admin'">
<div>.....</div>
<div ng-view>
</div>
</div>
</div>
So basically i have different ng-views for different views. The problem here is when user is not logged in ,login page is displayed using ng-view.But upon login the ng-view initializes with login page again (may be becoz of $route.current is already set).
When user clicks log in button he/she is directed to home page and again redirected to login page. so no change is displayed on the page.
This issue can be solved using ng-show/hide insted of ng-if. But that creates another issue that controllers are called twice becoz of two ng-view in the dom and also element can't be referred using id becoz two elements are generated fro the same id. So this solution can't be used.
Is there any way of solving it?
Multiple & Nested ng-view won't work on the same page.
You need take a look at angular ui-router which would be great to use in your case, you could also use nested ui-view using angular ui-router
Or may be you can avoid ng-if using ui-router
Hey I have two JSP pages that are step(s) 1 & 2 of a form. On step 1 I am displaying certain category options a user can choose from. In order for the user to get to step 2, they must click one of the category options and upon going to step 2, I am trying to display the name of the category that they clicked on. I know with ng-model, one can bind it to an input and display what is interacted in that input but for some reason it is not working if I bind the ng-model to a "p" or "span". I am new to AngularJs so please bare any rookie mistakes.
step_one.jsp
<div class="col-sm-6" ng-click="setStep(2)"><span class="glyphicon glyphicon-cutlery"></span>
<p ng-model="category">Cutlery & Service</p>
</div>
step_two.jsp
<div class="col-md-12">
<label for="requestCategory">Category:</label>
<p id="requestCategory" ng-model="category">{{category}}</p>
</div>
JS to switch steps:
$scope.setStep = function (step){
$scope.step = step;
};
$scope.isStepSet = function(step){
return ($scope.step === step) ;
};
Are you intermingling server vs client side development?
You have 2 JSPs, which I'm assuming each load AngularJS? The majority of Angular apps work with a single page (i.e. one JSP) and dynamically load/show different content (i.e. through angular views). Single page applications (SPAs) maintain state within a single page and Angular provides constructs to do this with $scope (you can also use localStorage to do this).
It looks like you're transitioning from a classic web/server-side development model to a client-side model. To do what you want to do above, you can keep everything in 1 JSP and use the following code:
HTML
<div ng-show="isStepSet(1)" ng-init="setStep(1)" class="col-sm-6" ng-click="setStep(2)"><span class="glyphicon glyphicon-cutlery"></span>
<p ng-model="category">Cutlery & Service</p>
</div>
<div ng-show="isStepSet(2)" class="col-md-12">
<label for="requestCategory">Category:</label>
<p id="requestCategory" ng-model="category">{{category}}</p>
</div>