Develop Reference

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.

Delete item from list Ionic

I'm building an ionic to do list app.
I'm working on a delete function where you click the delete button and it will delete the list item, but have I'm having problems and can't figure it out.
the delete button shows, but when you click it nothing happens.
HTML:
<ion-view view-title="To-Do">
<ion-content class="padding">
<!-- http://ionicframework.com/docs/components/#bar-inputs -->
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon placeholder-icon"></i>
<input type="text" ng-model="item.name" placeholder="Enter Task Here">
</label>
<button class="button ion-ios-plus-outline" ng-click="addItem(item)">
</button>
</div>
<ion-list>
<ion-item class="item-remove-animate" ng-repeat="item in items" >
<h3>{{item.name}}</h3>
<ion-option-button class="button-assertive ion-trash-a" ng-click="remove($index)"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Controller:
.controller('ShortTermCtrl', function($scope, Task) {
$scope.data = Task.data;
$scope.items = [];
$scope.item = {};
$scope.addItem = function (item) {
$scope.items.push(item);
$scope.item = {name: ""};
};
$scope.removeItem = function(index){
$scope.items.splice(index, 1);
};
})

You use the wrong function name in view. Change it from remove to removeItem:
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem($index)"></ion-option-button>

for ng-repeat use
ng-repeat='(index, item) in items'
to keep track of the index of every item, and pass the index to the remove function
ng-click="removeItem({{index}})"

As per your codexample, you commented out the remove(task) function, you need to target the removeItem(index) function in your HTML
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(1)">
Instead of a static index number, provide the items/index itself to a generic function, then delete that array item, like so:
$scope.removeItem = function(items, index){
items.splice(index, 1);
};
Your HTML will look like so:
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(items, $index)">
The $index is automatically exposed to your ng-repeat scope among other useful properties, you can read more in the docs of ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat

Navigating between tabs and View - Angular

Im fairly new to programming. I'm simply having a problem with trying to create the correct code to a navigate tab on the menu on the application. I, have been try for hours to figure out what the error in the coding in to navigate simply to a tab
app.js
.state('tab.list', {
url: '/list',
views: {
'tab-list': {
templateUrl: 'templates/timeline/tab-list.html',
controller: 'ListCtrl',
}
}
})
tab-list.html
<ion-view view-title="List">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="{{chat.face}}">
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
<p class="padding center" style="margin: 20px 0px">
To test how thi
</p>
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Tabs.html
<ion-tab title="List" icon-off="ion-ios-people-outline" icon-on="ion-ios-play" href="#/tab/list">
<ion-nav-view name="tab-list"></ion-nav-view>
</ion-tab>
Controller-list.js
.controller('ListCtrl', function($scope, ListCtrl) {
});

Why is my view showing information only the first time?

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?

Ionic infinite scrolling, only scrolls when navigated away and back to page

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