I have two ion scroll tags. Inside each of these ion-scroll tags is a list. Each of these lists start with 10 items, and when a user reaches the bottom of a particular ion scroll it should load more. The problem I am facing is this is quite not working correctly. If I scroll through the first it scroll window and paginate through all the items it should say no more content. This does not happen though, instead if I scroll through the second scroll window then it will load more items in the first and second ion scroll window(which I don't want). Essentially I would like the two ion scrolls to be completely independent of each other. I would like each to load it's own content. I hope that made sense. Here is my codepen:
http://codepen.io/polska03/pen/jWKRwP
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-app="ionicApp" ng-controller="MyCtrl" class="background-places">
<ion-view>
<ion-content class="" scroll='false'>
<ion-scroll style="height:50%">
<ion-list>
<ion-item collection-repeat="list in _list">
<h2>Item</h2>
</ion-item>
</ion-list>
<button class="button button-full button-outline button-positive" ng-if="noMoreContent">
No more Content
</button>
<ion-infinite-scroll ng-if="canWeLoadMoreContent()" on-infinite="populateList()" distance="1%">
</ion-infinite-scroll>
</ion-scroll>
<hr>
<hr>
<ion-scroll style="height:50%">
<ion-list>
<ion-item collection-repeat="list2 in _list2">
<h2>Item</h2>
</ion-item>
</ion-list>
<button class="button button-full button-outline button-positive" ng-if="noMoreContent2">
No More Content
</button>
<ion-infinite-scroll ng-if="canWeLoadMoreContent2()" on-infinite="populateList2()" distance="1%">
</ion-infinite-scroll>
</ion-scroll>
</ion-content>
</ion-view>
</body>
</html>
Javascript:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope._list = [];
$scope.populateList = function() {
for (var i = 0; i <= 9; i++) {
$scope._list.push({});
}
console.log($scope._list.length);
$scope.$broadcast('scroll.infiniteScrollComplete');
}
$scope.noMoreContent = false;
$scope.canWeLoadMoreContent = function() {
if($scope._list.length > 15) {
$scope.noMoreContent = true;
return false;
}else{
return true;
}
}
$scope.populateList();
$scope._list2 = [];
$scope.populateList2 = function() {
for (var i = 0; i <= 9; i++) {
$scope._list2.push({});
}
console.log($scope._list2.length);
$scope.$broadcast('scroll.infiniteScrollComplete');
}
$scope.noMoreContent2 = false;
$scope.canWeLoadMoreContent2 = function() {
if($scope._list2.length > 15) {
$scope.noMoreContent2 = true;
return false;
}else{
return true;
}
}
$scope.populateList2();
});
The issue comes from the 'require' ?^ionicScroll that is not resolved properly in the directive. Not sure why, as I'm not an AngularJS expert.
That said, I found a workaround which is about inserting an extra div around the content tags, as in http://codepen.io/priand/pen/PzYbZG, if this helps someone.
<div>
<ion-content class="has-header col col-50">
<ion-list>
<ion-item ng-repeat="item in items"
item="item">
Item {{ item.id }}
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</div>
<div>
<ion-content class="has-header col col-offset-50 col-50">
<ion-list>
<ion-item ng-repeat="item in items2"
item="item">
Item {{ item.id }}
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable2" on-infinite="loadMore2()" distance="10%"></ion-infinite-scroll>
</ion-content>
</div>
Related
I am trying to implement an ion-list with ion-items that are swipable but don't have to be clicked on the side to trigger an event.
It should work like like the default contacts app on Samsung phones, where you can either swipe left to call or right to send a SMS.
The list in the parent page looks like this:
<ion-list *ngFor="let person of persons | filter:searchTerm">
<app-person-entry [person]="person" (click)="openModal(person)"></app-person-entry>
</ion-list>
The person-entry component looks like this:
<ion-item>
<ion-avatar slot="start">
<img src={{person.icon}}>
</ion-avatar>
<div>
<div class="container">
<ion-label>{{person.lastname}}</ion-label>
<ion-label>{{person.firstname}}</ion-label>
</div>
<div class="container">
<ion-label>{{person.postalCode}}</ion-label>
<ion-label>{{person.city}}</ion-label>
<ion-label>{{person.address}}</ion-label>
</div>
</div>
</ion-item>
you can use ion-item-sliding.
e.g:
<ion-list>
<ion-item-group #myItemsId>
<ion-item-sliding (ionSwipe)="swipeEvent($event, myItemsId)">
<ion-item-options side="start">
<ion-item-option>CALL</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>Item Options</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option>SMS</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
.ts:
swipeEvent($event, item) {
console.log($event)
if ($event.detail.side == 'start') {
console.log('call now');
this.closeAllItems(item)
} else {
console.log('SMS now');
this.closeAllItems(item)
}
}
closeAllItems(item) {
let a = Array.prototype.slice.call(item.el.children)
a.map((val) => {
val.close();
})
}
I am developing a hybrid application by using Ionic Framework. However, my application failed in double binding when user back to hybrid application. The application able to retrieve Array Object from localstorage but my ngrepeats failed to load the var I assigned from localstorage. The following is my code.
controller.js
.controller('ChatsCtrl', ['$scope','$state', '$ionicTabsDelegate' , '$ionicListDelegate', '$rootScope'
,function($scope,$state,$ionicTabsDelegate, $ionicListDelegate, $rootScope) {
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = channel_list;
}])
HTML File
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom({{'chat.displayName'}}, {{'chat.channelID'}})">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Try calling a function on page load that re initialize your list something like this,
Controller.js
$scope.init = function(){
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
}
$scope.init();
And make sure when ever you visit this page this function is fired.
Note: if you are on the same page and wants to rebind the list then call this function in your goBack() or goForward() function where ever required.
Hope this solves your problem.
JS
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
HTML file
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom(chat.displayName,chat.channelID)">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
ng-click="chatRoom(chat.displayName,chat.channelID) Pass value like this.
I am getting an undefined when getting the value of the textbox which i weird because i have done this perfectly in my other controller. I am missing something or what
app.controller('expandCtrl', function($scope, $stateParams) {
$scope.get_logged_status = sessionStorage.getItem('logged_status');
console.log('Expand Message Logged Status: ' + $scope.get_logged_status);
if($scope.get_logged_status == 'false')
{ window.location ='#/login'; }
$scope.getPassedId = sessionStorage.getItem('passedId');
$scope.getPassedFrom = sessionStorage.getItem('passedFrom');
$scope.getPassedMessage = sessionStorage.getItem('passedMessage');
$scope.sendReply = function(){
console.log($scope.txtReply); <----- HERE!
}
})
my html
<ion-view cache-view="false" view-title="{{ getPassedFrom }}">
<ion-pane>
<br><br><br>
<div class="padding">
<p>{{ getPassedMessage }}</p>
<div class="list list-inset">
<ion-item>
<textarea rows="5" style="resize:none" ng-model="txtReply"></textarea>
</ion-item>
<button class="button button-block button-energized" ng-click="sendReply()">
Reply
</button>
</div>
</div>
</ion-pane>
</ion-view>
EDIT: i have tried declaring $scope.txtReply =''; and logging as this.txtReply still it returns null;
I have simple app with a menu on the left with just two options:
When I click on the "Servicios" option I'm loading some categories from my Parse application:
Then, if I click on the "Tablero" option and then again try to go back to "Servicios" option by clicking on the menu, the data doesn't load:
This is my controller:
.controller('ServicesCtrl', function($scope, $state) {
$scope.categories = {};
// Categories
var Category = Parse.Object.extend("Category");
var query = new Parse.Query(Category);
query.equalTo("isActive", true);
query.ascending("name");
query.find({
success: function(categories) {
$scope.categories = categories;
}
});
})
And this is my view:
<ion-view class="services-view" cache-view="false">
<ion-nav-title>
<span>Servicios</span>
</ion-nav-title>
<ion-content>
<ion-list class="list">
<ion-item ng-repeat="category in categories" class="item item-thumbnail-left">
<img src="img/cut.svg">
<h2>
{{ category.get("name") }}
</h2>
<p>
</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Do I need to do some extra work for loading again?
I have a ionic content with a ionic list in it.
Here is my HTML:
<ion-content>
<ion-view>
<ion-list >
<div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
<a class='normala' href="#/tab/dash/{{maanta.id}}">
<div class='cardHeader item-text-wrap'>
{{maanta.title}}
</div>
<hr class='divi'>
<div class='cardDivider item-text-wrap'>
{{maanta.source}} - {{maanta.pub_date}}
</div>
<hr class='divi'>
<div class='cardBody item-text-wrap'>
{{maanta.summery}}
</div>
</a>
</div> </ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
</ion-view>
Here is my JS:
$scope.limit = 10;
$scope.loadMore = function() {
$scope.limit +=10
if ( $scope.maanta.length <$scope.limit) {
$scope.noMoreItemsAvailable = true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
};
The problem
When I first land on the page the infinite scrolling doesn't change limit for my ng-repeat. When I navigate away to another page and come back the infinite loop works as expected.
Check out your HTML. There's a mistake in the tag sequence :
<ion-content>
<ion-list >
<div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
<a class='normala' href="#/tab/dash/{{maanta.id}}">
<div class='cardHeader item-text-wrap'>
{{maanta.title}}
</div>
<hr class='divi'>
<div class='cardDivider item-text-wrap'>
{{maanta.source}} - {{maanta.pub_date}}
</div>
<hr class='divi'>
<div class='cardBody item-text-wrap'>
{{maanta.summery}}
</div>
</a>
</div> </ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
The tag <ion-view> was not required as such.
I think you should reconsider your approach and try to push the new content to your view.
The key is pushing the new content.
Fore example (from user DILIP on codepen:)
<ion-infinite-scroll distance="2"
on-infinite="loadMoreData()"
ng-if="!moredata" >
</ion-infinite-scroll>
var app = angular.module("ionicInfiniteScrollApp",['ionic']);
app.controller("InfiniteAppCntrl",function($scope)
{
$scope.moredata = false;
$scope.loadMoreData=function()
{
$scope.items.push({id: $scope.items.length});
if($scope.items.length==100)
{
$scope.moredata=true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
};
$scope.items=[];
});
Here's the link to the codepen:
http://codepen.io/d4dilip/pen/rkxyA