angularJS转盘负循环与模运算

angularJS carousel negative cycling with modulo operation

本文关键字：运算 循环 angularJS      更新时间：2023-09-26

我正试图使用AngularJS构建一个旋转木马组件，下面是我在stackoverflow上找到的这个例子。

下一个函数按预期工作，但当我尝试对上一个函数执行同样的操作时，当它达到0时，它会变成负值，循环到-3，然后跳回0。

有人能解释一下% $scope.pages.length究竟是做什么的，它是如何工作的吗？我试着在谷歌上搜索，但没有找到任何解释。

我的控制器：

.controller('portfolioController', function($scope) {
    $scope.pages = [
    {
        image: "/../images/Placeholder.jpg",
        alt: "thumbnail first page",
        name : "1",
        description : "Moj Prvi Webpage",
        active : 1
    },
    {
        image: "/../images/Placeholder.jpg",
        alt: "thumbnail first page",
        name : "2",
        description : "Moj Drugi Webpage",
        active : 0
    },
    {
        image: "/../images/Placeholder.jpg",
        alt: "thumbnail first page",
        name : "3",
        description : "Moj Tretji Webpage",
        active : 0
    },
    {
        image: "/../images/Placeholder.jpg",
        alt: "thumbnail first page",
        name : "4",
        description : "Moj Četrti Webpage",
        active : 0
    }
    ];
    $scope.current = 0;
    $scope.Next = function() {
        $scope.current = ($scope.current + 1) % $scope.pages.length;
    }
    $scope.Previous = function() {
        $scope.current = ($scope.current - 1) % $scope.pages.length;
    }
});

我的html:

<div class="col-xs-12">
        <div class="thumbnail">
            <img ng-src="{{ pages[current].image }}" alt="{{ pages[current].alt }}">
            <div class="caption">
                <h3>{{ pages[current].name }}</h3>
                <p>{{ pages[current].description }}</p>
            </div>
        </div>
        <div class="row carousel-thumbnails">
            <div class="col-xs-12">
                <div class="btn btn-info" ng-click="Previous()">Previous</div>
                <img ng-repeat="img in pages" ng-class="{'active': img.active}" src="{{ img.image }}" alt="{{ img.alt }}">              
                <div class="btn btn-info" ng-click="Next()">Next</div>
            </div>
        </div>
    </div>

有问题的行是一个模（或余数）运算。它取第一个值，除以第二个值，然后返回余数。

$scope.Previous不起作用的原因是，一旦它达到零，它就会开始返回负数，而不是回到最大值（在这种情况下，该值将是$scope.pages.length - 1）。为了避免这种情况，请尝试这样的操作（其中问号是三元/条件运算符：

$scope.current = $scope.current == 0 ? ($scope.pages.length - 1) : ($scope.current - 1)

这是一个正在工作的jsfiddle

相关文章：