@thurft wrote:
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-scrolland then attempts to change thehighlightclass when the$indexis equal to the variablecurrentIndex.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
currentIndexvariable updates in the view correctly? See working codeHTML
<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); };
Posts: 1
Participants: 1