Develop Reference

Ionic Cordova: Angualarjs double binding is not working

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.

Auto scroll to bottom with ng-repeat in Ionic

I have a problem that become a realy nightmare. I build a mobile chat app with Ionic, Angular and Firebase. The message exchange works well, but i have problem with auto scroll do bottom when received new messages, i try use $ionicScrollDelegate, scroll-glue Directive, Jquery function and nothing works.
Page chat
<div ng-controller="ChatController as chatCtrl" id="chats_page" class="upage-content vertical-col left hidden has-subheader">
<div class="bar bar-subheader subheader-chat">
<h2 class="title">{{chatCtrl.status}}</h2>
</div>
<div class="" data-uib="layout/row" data-ver="0" id="chatBox">
<ion-content id="autoscroll" class="widget uib_w_92 d-margins topbar" data-uib="ionic/list" data-ver="0" delegate-handle="mainScroll">
<ion-list scroll-glue>
<ion-item ng-repeat="msg in chatCtrl.messages" class="item widget uib_w_93 chat-cliente item-text-wrap" data-uib="ionic/list_item" data-ver="0" ng-class="chatCtrl.getRole(msg.role)">{{msg.text}}<a class="chat-time">{{msg.time}}</a>
</ion-item>
</ion-list>
</ion-content>
</div>
<div class="bar bar-footer footer-chat" >
<i class="placeholder-icon "></i>
<textarea type="text" name="msg" placeholder="Digite sua mensagem..." class="chat-text" ng-disabled="chatCtrl.msgText()" ng-model="myMsg" ></textarea>
<button class="button ion-paper-airplane btn-chat-send" ng-click="chatCtrl.sendMsg(myMsg)" ng-disabled="chatCtrl.msgText()" id='btn_send_chat'></button>
</div>
</div>
And piece of ChatController
angular.module('myApp')
.controller("ChatController", ['User','FireBaseApp','$firebase','$ionicLoading','$timeout','$ionicPlatform','$location','$ionicHistory','$timeout','$ionicPopup','$ionicScrollDelegate','$scope',function(User, FireBaseApp ,$firebase, $ionicLoading,$timeout,$ionicPlatform,$location,$ionicHistory,$timeout,$ionicPopup,$ionicScrollDelegate,$scope){
var self = this;
... pieces of code ...
self.sendMsg = function(msg){
$scope.myMsg = null;
$ionicScrollDelegate.scrollBottom();
}

You can use.
$ionicScrollDelegate.scrollBottom(true);
Example on codepen

After a year i found a solution: Separate my app in angular template and finally scrollglue works.

Remove ionic 2 ion-card div using Javascript in controller

I need to remove an ionic 2 card when someone clicks on the trash icon. The code I have so far gives a querySelector is null error when I run it.
The view html looks like this:
<ion-card *ngFor="#mediaItem of mediaItems" id="item{{mediaItem.id}}" class="media-item">
<ion-card-header class="title-header">
<div class="title-item">
{{mediaItem.title}}
</div>
<ion-icon name="trash" class="bookmark_trash_icon" (click)="removeItem(mediaItem.id)"></ion-icon>
</ion-card-header>
<ion-card-content class="outer-content" >
<img src='{{mediaItem.url}}'>
</ion-card-content>
<ion-item class="bookmark-media-item">
<!-- <button (click)="topup(mediaItem)" clear item-left> -->
<div style="float:left;">
<ion-icon name="heart"></ion-icon>
{{mediaItem.liked}}
<ion-icon name="close-circle"></ion-icon>
{{mediaItem.disliked}}
</div>
<a (click)="showUserProfile(mediaItem.owner, mediaItem.username)" style="float:left;">
{{mediaItem.username}}
</a>
<div style="float:right;">
<img src="img/tiny-v.png" class="bookmark-v-icon">
{{mediaItem.credits_left}}
</div>
</ion-item>
</ion-card>
My controller javascript code looks like this:
removeItem(theItemID) {
let cardToHide = '#item'+theItemID;
document.querySelector(cardToHide).style.display = 'none';
}
The error I get is
querySelector is null

You can send the object instead of the id by changing that part of the code:
(click)="removeItem(mediaItem)"
And then find that object in you mediaItems array and delete it from there. Then your view will be automatically updated.
First get the index of that object in the array, and then you can use the mediaItems.splice(index, 1) to delete it from the array:
removeItem(theItem) {
let index = this.mediaItems.indexOf(theItem);
this.mediaItems.splice(index,1);
}

Multiple ion-scroll both with infinite scroll

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>

ng-click with variables in a list

I have a list of items in an ionic/angular/phonegap application and I'm trying to use an action sheet and pass in the variables. However, the ng-repeater is on an and I don't seem to have access to the variable on the same line as the ng-repeater.
Markup:
<ion-view view-title="My Pets">
<ion-content>
<div class="list card">
<div class="item item-thumbnail-left item-icon-right" ng-repeat="pet in missing" ng-click="actionSheet({{pet.AnimalCode}})">
<img ng-src="http://*****.com/getimage.ashx?imgid={{pet.Picture}}">
<h2>{{pet.Name}}</h2>
<p>{{pet.Type}} - {{pet.SubType}} </p>
<p>{{pet.Size}} - {{pet.Colour1}}</p>
<i class="icon ion-chevron-right"></i>
</div>
</div>
</ion-content>
</ion-view>
Backend:
$scope.actionSheet = function(PetID) {
$log.info(PetID);
var options = {
title: 'Manage Pet',
buttonLabels: ['Edit Pet', 'Report Lost', 'Share Pet'],
addCancelButtonWithLabel: 'Cancel',
androidEnableCancelButton: true,
winphoneEnableCancelButton: true,
addDestructiveButtonWithLabel: 'Delete Pet'
};
$cordovaActionSheet.show(options)
.then(function(btnIndex) {
var index = btnIndex;
});
PetID is empty
EDIT - Sorry i was too quick, taking the {{}} fixed it

I found my own answer three seconds after posting. It should be ng-click="pet.AnimalCode" not {{}}