I've the following simple app using Ionic 1.1 and angularJS 1.4
http://codepen.io/thurft/pen/zvzLqp
It scrolls a list of items in an ion-scroll and then attempts to change the highlight class when the $index is equal to the variable currentIndex.
I get the right value when I output console.log("currentIndex: " + $scope.currentIndex); but it never changes in the View.
What am I missing so that the currentIndex variable updates in the view correctly? See working code
HTML
<body ng-app="starter" ng-controller="AppCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-scroll direction="y" on-scroll="gotScrolled()" delegate-handle="signsScroll">
<div class="sign" ng-repeat="sign in signs" ng-class="{'highlight': $index === currentIndex}">{{sign}}</div>
</ion-scroll>
</ion-content>
</ion-pane>
</body>JS
$scope.signs = ["Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius", "Capricorn", "Aquarius", "Pisces"];
$scope.currentIndex = 0;
$scope.gotScrolled = function () {
var itemLength = $scope.signs.length,
containerHeight = 100,
viewingItemNumberObj = {"min": itemLength + 1, "max":0};
// Apply class depending whether they are visible within the container or not
$.each($(".sign"), function () {
if($(this).position().top < 0 || $(this).position().top > containerHeight -10) {
$(this).addClass("notInView");
$(this).removeClass("inView");
} else {
$(this).addClass("inView");
$(this).removeClass("notInView");
}
});
// Get min and max obj position thats showing in the scroller
$.each($(".inView"), function () {
var theIndex = $scope.signs.indexOf($(this).text());
if(theIndex <= viewingItemNumberObj.min ) {
viewingItemNumberObj.min = theIndex;
} else if (theIndex >= viewingItemNumberObj.min && viewingItemNumberObj.max <= theIndex ) {
viewingItemNumberObj.max = theIndex;
}
})
// get the number and apply it to the currentIndex
$scope.currentIndex = Math.floor((viewingItemNumberObj.min + viewingItemNumberObj.max) / 2);
console.log("currentIndex: " + $scope.currentIndex);
};