change array Items dynamically in angularjs

Question

i want to create timeline in angular. in this timeline years change with mouse wheel event.for mouse wheel event i use hamster.js library. How to change array items by mouse wheel event? here is my code:

angular.module('myApp', [])
.controller("Slider", function ($scope) {
var mouseWheel= document.getElementById('slider');

var hammer1 = Hamster(mouseWheel);
$scope.state = { zoom: 1, top: 0 };
$scope.dragY = 0;
 $scope._calc = function(state) {
    var years = [];
    var top = $scope.state.top;
    for (var i = -4000; i <= 2015; i += state.zoom) {
        var obj = {top: top, year: i};
        years.push(obj);
        top += 40;
    }
    return years;
}
$scope.years = $scope._calc($scope.state);
    hammer1.wheel(function(event, delta){
        if (delta > 0) {
          $scope.zoomOut();  // this function not working
        } else if (delta < 0) {
                $scope.zoomIn();   
        }
    });
$scope.zoomOut= function () {
    $scope.state.zoom += 10;
    $scope.years = $scope._calc($scope.state);
};

})

jlowcs · Accepted Answer · 2015-02-28 13:36:12Z

1

My bet is that your Hamster callback does not trigger a digest. Try using $scope.$apply():

hammer1.wheel(function(event, delta){
    $scope.$apply(function () {
        if (delta > 0) {
            $scope.zoomOut();  // this function not working
        } else if (delta < 0) {
            $scope.zoomIn();   
        }
    }
});

answered Feb 28, 2015 at 13:36

jlowcs

1,9331 gold badge11 silver badges16 bronze badges

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

Comments

jantimon · Accepted Answer · 2015-02-28 13:37:07Z

0

You have to call $scope.$digest(); or $scope.$apply(); so angular knows that it should rerender:

hammer1.wheel(function(event, delta){
        if (delta > 0) {
          $scope.zoomOut();  // this function not working
        } else if (delta < 0) {
          $scope.zoomIn();   
        }
        $scope.$digest();
    });

See also digest and apply explained in detail

answered Feb 28, 2015 at 13:37

jantimon

38.4k23 gold badges127 silver badges194 bronze badges

Collectives™ on Stack Overflow

change array Items dynamically in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related