Check out my CodePen link: http://codepen.io/gauravcoder/pen/vLWEjJ?editors=101 I'm just getting started with Angular JS.
I have some items that trigger an alert when clicked, it works fine for items that are not loaded via an HTTP request. However, the click event does not work for items loaded via AJAX.
Here is the HTML code: (the alert only works for the first two non-ajax items)
<ion-list>
<div style="height:40px;border-bottom:1px solid #ccc" id="clickit">
Item No Ajax call
</div>
<div style="height:40px;border-bottom:1px solid #ccc" id="clickit">
Item No Ajax call
</div>
<div ng-repeat="item in items" style="height:40px;border-bottom:1px solid #ccc" id="clickit">
Item Ajax Call: {{ item.username }}
</div>
</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
Here is the JavaScript code:
angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope,$http) {
$("div#clickit").click(function() {
alert('hey');
});
$scope.noMoreItemsAvailable = false;
$scope.currentPage = 0;
$scope.loadMore = function() {
$http.get('http://mourjewels.com/www/stones2.php?page='+$scope.currentPage).success(function(items) {
$scope.currentPage += 1;
$scope.items = $scope.items.concat(items.data);
console.log(items.count);
$loopcount = Math.ceil(items.count/10);
console.log($loopcount);
$scope.$broadcast('scroll.infiniteScrollComplete');
if($scope.currentPage >= $loopcount){
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.noMoreItemsAvailable = true;
}
});
};
$scope.items = [];
});