Angularjs - Accumulate the results of the pagination - angularjs

I have a paginate layer showing the results to ten a ten:
<div class="panel-body" ng-repeat="user in users">
<div class="col-md-12">
<div class="col-md-6 name">{{user.dato1}}</div>
<div class="col-md-6 product">{{user.dato2}}/div>
</div>
<div class="col-md-12 pos-action">
<div class="col-md-4 product">{{user.dato3}}</div>
<div class="col-md-8 product">{{user.dato4}}</div>
</div>
</div>
I need the following: The first page show ten results, but if I go to the next page I have to show the new ten results and the ten the previous results and so on, for example, the page size three must have thirty registers, but if I come back the page size one must show only ten.
/*
* Function to get data service.
*/
function paintData()
{
dataIn=getListEventsPdtes.dataIn;
dataOut=getListEventsPdtes.dataOut;
if(dataOut.listEvents != null ){
$scope.users = dataOut.listEvents.event;
//Save data in cache
$scope.cache=$scope.cache.concat(dataOut.listEvents.event);
}else{
var text = "An internal error occurred, please contact your system administrator";
modalFactory.message(text);
}
}
function prevPage(){
if($scope.currentPage > 0){
$scope.currentPage--;
var cachedValues = $scope.cache.slice($scope.currentPage*$scope.itemsPerPage, $scope.currentPage*$scope.itemsPerPage+$scope.itemsPerPage);
$scope.users = cachedValues;
}
};
function nextPage(dato, repo){
$scope.currentPage++;
var cachedValues = $scope.cache.slice($scope.currentPage*$scope.itemsPerPage, $scope.currentPage*$scope.itemsPerPage+$scope.itemsPerPage);
if(cachedValues.length == 0){
$scope.getData(dato, repo);
}else{
$scope.users = cachedValues;
}
};
Thanks,

Can u pass the index value to PrevPage when click on paging index 1 2....
function prevPage(index){
if($scope.currentPage > 0){
$scope.currentPage--;
var cachedValues = $scope.cache.slice(index*$scope.itemsPerPage, index*$scope.itemsPerPage+$scope.itemsPerPage);
$scope.users = cachedValues;
}
};

Related

How to iterate elements from sliced array?

JS :
var populateRecord = function(data) {
var chunk = 40;
$scope.users = [];
console.log(data.length + "hi");
for (var i = 0; i < data.length; i += chunk) {
console.log("inside for");
// userCount++;
$scope.users.push(data.slice(i, i + chunk));
// console.log(temp);
}
console.log($scope.users)
};
HTML :
<div ng-repeat="record in users track by $index">
<div class="col-md-2 col-sm-2 col-xs-2">
<label>
<input type="checkbox" ng-model="isAllSelected" ng-change="userSelectedToggle()" ng-checked="isAllRecordSelected(record)">
</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="text-overflow">
<span ng-model="record.dispalyName">{{record.displayName}}</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<span ng-model="record.mobile"> {{record.mobile}}</span>
</div>
</div>
Output on console after 'populateRecord '
2 inside for
2[array(40) ,array(7)]
Now first I want to show 40 elements and after clicking on button ONLY second array should display on screen. Any solution ?
You just have to keep a counter and increment the index of users array by one on click of the button publish and store it in a new array which will be used for rendering the UI.
JS:
var counter=0;
$scope.sendBulkMessages=function(){
counter=counter +1;
//do your calculations with $scope.parent before assigning it to next 40 elements
$scope.parent=$scope.users[counter];
console.log($scope.parent);
}
Fiddle: http://jsfiddle.net/brtmzqLk/3/

using ng-repeat with api json in a for-loop

I am developing a mini app using angularjs that would grab data from a news api. I have succeeded in getting an array of 10(just the amount i want) articles from the array of 10 news sources( all provided by the api) using a for-loop(below). The problem is that the ng-repeat in the view only displays the last iteration of the loop. How can i get it to display all the iterations?
here is the controller:
angular.module('newsApp',[])
.controller('newsController',['$scope','$http', function($scope,$http){
var index = 0;
var sortby = ['top','latest','popular'];
$http.get('https://newsapi.org/v1/sources?language=en').then(function(response){
var sourceIdArray = [];
var articlesArray = [];
for (var i = 0; i < 9; i++) {
$scope.getId = response.data.sources[i].id;
sourceIdArray.push($scope.getId);
$http.get(' https://newsapi.org/v1/articles?source=' + sourceIdArray[i] + '&apiKey=53bec2b512724f58b92203f0f7e93dc1').then(function(response){
$scope.comits = response.data.articles
articlesArray.push($scope.comits);
});
}
})
}])
The loop gives me all the required articles but i don't know how to write the ng-repeat to display all the data instead of only the last iteration
and the html:
<div class="row rowdiv" ng-repeat="comit in comits" ng-if="$index % 2 == 0">
<div class="col-md-6">
<img ng-src="{{comits[$index].urlToImage}}" alt="">
<h3><a ng-href="{{comits[$index].url}}">{{comits[$index].title}}</a></h3>
<p>{{comits[$index].description}}</p>
<h5>{{result}} {{comits[$index].author}}</h5>
<h6 class="pull-right">{{comits[$index].publishedAt}}</h6>
</div>
<div class="col-md-6">
<img ng-src="{{comits[$index +1].urlToImage}}" alt="">
<h3><a ng-href="{{comits[$index +1].url}}">{{comits[$index +1].title}}</a></h3>
<p>{{comits[$index + 1].description}}</p>
<h5>{{result}} {{comits[$index + 1].author}}</h5>
<h6 class="pull-right">{{comits[$index +1].publishedAt}}</h6>
</div>
</div>
any help would be appreciated!
You are pushing the articles into the articlesArray with articlesArray.push($scope.comits);
You need to make articlesArray a member of $scope, then access it with ng-repeat. $scope.comits only contains the last article retrieved based on your code.
Or declare comits as $scope.comits = [] then change $scope.comits = response.data.articles to $scope.comits.push(response.data.articles)

Get checked values in another view with angularJS

I have list of checkbox with button submit , and I when i click on submit, I have to get all checked values in other view table. I find a lot of answers, but they all propose to get values in the same view,but I need to get values in other view(ajoutFactAdmin2), how can I do that please. this is the code:
ajoutFactAdmin2.html
<div class="row" ng-repeat="x in namesF3">
<div class="col"><input type="checkbox" name="" ng-modal="x.selected" ng-checked="exist(x)" ng-click="toggleSelection(x)" ng-true-value="'{{x.CodeEnvoiColis}}'" ng-false-value="''" id="'{{x.CodeEnvoiColis}}'"></div>
<div class="col" >{{x.CodeEnvoiColis}}</div>
<div class="col" width="20%">{{x.StatutColis}} </div>
<div class="col" width="20%">{{x.VilleDestColis}}</div>
</div>
<div class="selectedcontent">
<h3> Selected Names </h3>
<p ng-repeat = "selectedName in selected"> {{selectedName.CodeEnvoiColis}} </p>
</div>
<a class="button button-info" ng-click="toggleSelection(x)" href="#/ajoutFactAdmin2" style="background-color:#1627C0;float: right;">Ajouter</a>
app.js :
$scope.selected = [];
$scope.namesF3 = [];
$scope.exist = function(item){
return $scope.selected.indexOf(item) > -1;
}
$scope.toggleSelection = function(item){
var x = [];
var idx = $scope.selected.indexOf(item);
if(idx > -1){
$scope.selected.splice(idx, 1);
}
else{
$scope.selected.push(item);
}
}
There are mainly 3 ways to achieve this
local storage/session storage:
To set value in local storage:
localStorage.setItem("key","value");
To get value:
localStorage.getItem("key");
Factory/Service
angular.module('app').factory('tempStorageService',function(){
var data={};
return{
setData:function(tempData){
data=tempData;
},
getData:function(){
return data;
}
}
})
$rootScope
$rootScope.tempData = YourData;
I would prefer to go with localstorage option because if you refresh the browser the data that is stored using factory or with $rootscope vanishes.

Get checked values in other view

I have list of checkbox with button submit , and I when i click on submit, I have to get all checked values in other view table. I find a lot of answers, but they all propose to get values in the same view,but I need to get values in other view(ajoutFactAdmin2), how can I do that please. this is the code:
ajoutFactAdmin2.html
<div class="row" ng-repeat="x in namesF3">
<div class="col"><input type="checkbox" name="" ng-modal="x.selected" ng-checked="exist(x)" ng-click="toggleSelection(x)" ng-true-value="'{{x.CodeEnvoiColis}}'" ng-false-value="''" id="'{{x.CodeEnvoiColis}}'"></div>
<div class="col" >{{x.CodeEnvoiColis}}</div>
<div class="col" width="20%">{{x.StatutColis}} </div>
<div class="col" width="20%">{{x.VilleDestColis}}</div>
</div>
<div class="selectedcontent">
<h3> Selected Names </h3>
<p ng-repeat = "selectedName in selected"> {{selectedName.CodeEnvoiColis}} </p>
</div>
<a class="button button-info" ng-click="toggleSelection(x)" href="#/ajoutFactAdmin2" style="background-color:#1627C0;float: right;">Ajouter</a>
app.js :
$scope.selected = [];
$scope.namesF3 = [];
$scope.exist = function(item){
return $scope.selected.indexOf(item) > -1;
}
$scope.toggleSelection = function(item){
var x = [];
var idx = $scope.selected.indexOf(item);
if(idx > -1){
$scope.selected.splice(idx, 1);
}
else{
$scope.selected.push(item);
}
}
You have to do like when user click submit button you need to call one function on controller and stored all value checked value in local storage and redirect to next page and next controller you have to get local storage value and display in view page.
or
You can do like from controller function you have to pass array as string and in next controller get state param value and use json.parse for convert string to object and display in html

post.length stays 0 due to loop - AngularJS

I'm trying to add pagination but I can't seem to figure out this last part.
Everything is setup, though my pagination isn't recording the amount of posts that are linked with the user.
Seeing that I'm doing a forEach and if loop and pushing the retrieved items into a empty collection, my 'posts.length' is returning 0.
Hence the pagination only showing page 1/1 and not 1/2 (for example).
Here is my full code:
profileCtrl.js
Here is the $http.get - I'm trying to get all the posts that the logged in user made doing this loop:
app.controller('profileCtrl', function($scope, auth, $http, $log) {
$scope.auth = auth;
$scope.date = auth.profile.created_at;
$scope.pageSize = 5;
$scope.posts= [];
$http.get('URL')
.then(function(result) {
angular.forEach(result.data, function(data, key) {
if(data.userId === auth.profile.user_id) {
$scope.posts.push(data);
}
});
});
});
profile.html
As you can see, I'm trying to get the length of post in posts using total-items="posts.length":
<div class="col-md-8 no-padding-right">
<div class="panel panel-primary">
<div class="list-group-item active text-center">
<h4 class="no-margin-top no-margin-bottom">Recent Activity</h4>
</div>
<a href="#" class="list-group-item" ng-repeat="post in posts| startFrom: (currentPage - 1) * pageSize | limitTo: pageSize | orderBy :'created_at':true">
<div class="row">
<div class="col-md-4">
<div class="thumbnail no-border no-margin-bottom">
<img src="https://placehold.it/150x150" alt="bird" width="150" height="150"/>
</div>
</div>
<div class="col-md-8">
<h4 class="no-margin-top no-margin-bottom"><strong>{{post.birdname}}</strong></
</div>
</div>
</a>
<uib-pagination total-items="posts.length" ng-model="currentPage" max-size="pageSize" boundary-link-numbers="true"></uib-pagination>
</div>
</div>
app.js
I also added a filter in app.js:
app.filter('startFrom', function() {
return function(data, start) {
return data.slice(start);
}
});
When I console.log(posts.length); I keep getting 0 and I'm guessing it's because of the $scope.posts = []; declared on top (profileCtrl.js).
Edit:
After doing a bit of debugging with console.log, I do get the value given when doing this:
$http.get('url')
.then(function(result) {
angular.forEach(result.data, function(data, key) {
if(data.userId === auth.profile.user_id) {
$scope.posts.push(data);
}
});
console.log($scope.posts.length);
});
How should I fix this?
If you're waiting for data to be returned before loading the collection (with pagination) either add a ng-if="posts.length" to the container, or initialise $scope.posts as being null and add ng-if="posts" if you want the list to show when the API returns 0 results. This will prevent Bootstrap's pagination directive being parsed until the data it needs is available.
Edit: After debugging, the following plunkr contains a working implementation: http://plnkr.co/edit/VQjNVK6gRKsCqxVb54nR?p=preview

Resources