Variable value not updating in view when changing it in $scope using Ionic and AngularJS

Question

I've the following simple app using Ionic 1.1 and angularJS 1.4

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);
      };

It's probably not triggering a digest cycle - wrap it in $timeout. — tymeJV
– tymeJV, Commented Oct 13, 2015 at 20:19

Zest · Accepted Answer · 2015-10-13 20:44:52Z

2

Add

$scope.$apply();

after

$scope.currentIndex = Math.floor((viewingItemNumberObj.min + viewingItemNumberObj.max) / 2);

It will Work.

For Reference, see http://codepen.io/anon/pen/VvzJqR

answered Oct 13, 2015 at 20:44

Zest

6935 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stas Coder Over a year ago

u are my saver!

Collectives™ on Stack Overflow

Variable value not updating in view when changing it in $scope using Ionic and AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related