在angularjs中动态更改数组项

change array Items dynamically in angularjs

本文关键字：数组 动态 angularjs      更新时间：2023-09-26

我想在angular中创建时间线。在这个时间轴中，年份随着鼠标轮事件而变化。对于鼠标轮事件，我使用hamster.js库。如何通过鼠标滚轮事件更改数组项？这是我的代码：

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

})

我敢打赌，您的Hamster回调不会触发摘要。尝试使用$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();   
        }
    }
});

您必须调用$scope.$digest();或$scope.$apply();，以便angular知道它应该重新发送：

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

另请参阅详细解释的摘要和应用

相关文章：