从n个元素的数组中一次显示5个元素，并在angularjs中重复bigbegin

Displaying 5 items at a time from an array of n items and again repeat from biginning in angularjs

本文关键字：元素 并在 5个 显示 angularjs bigbegin 一次 数组      更新时间：2023-09-26

我是angularJs的新手，我有一个情况，我必须从多个项目的数组中显示5个项目。即首先显示1-5个项目，然后过2-3秒在顶部插入第6个项目，并从底部删除第一个项目。数组显示为上第5，下第4，依此类推。所以每次用下一个项目替换顶部项目，并删除底部项目。当显示最后一个项目时，也从第一个项目返回。当最后一项显示时，下一项应该是第一项。

    $scope.activityFeedArray = function() {
    $scope.activityFeed[0] = $scope.actFeedArr[$scope.idx1];$scope.idx1=$scope.idx1+1;if($scope.idx1>=20){$scope.idx1=20-$scope.idx1};
    $scope.activityFeed[1] = $scope.actFeedArr[$scope.idx2];$scope.idx2=$scope.idx2+1;if($scope.idx2>=20){$scope.idx2=20-$scope.idx2};
    $scope.activityFeed[2] = $scope.actFeedArr[$scope.idx3];$scope.idx3=$scope.idx3+1;if($scope.idx3>=20){$scope.idx3=20-$scope.idx3};
    $scope.activityFeed[3] = $scope.actFeedArr[$scope.idx4];$scope.idx4=$scope.idx4+1;if($scope.idx4>=20){$scope.idx4=20-$scope.idx4};
    $scope.activityFeed[4] = $scope.actFeedArr[$scope.idx5];$scope.idx5=$scope.idx5+1;if($scope.idx5>=20){$scope.idx5=20-$scope.idx5};
};
 $interval(function() {$scope.activityFeedArray2();} , 1000);

按如下方式使用angularjs的$Interval函数:

    $interval(function() {activityFeedArray2();} , 1000);
    function activityFeedArray2() {
    $scope.activityFeed.shift();
    $scope.activityFeed.push(actFeedArr[counter]);
    counter=counter+1;
    if(counter>=actFeedArr.length) {
    counter = counter-actFeedArr.length;
    };
    };

下面是运行良好的代码:

app.controller("activityFeedCntrl",function($scope,$interval) {
$scope.activityFeed=[{id:1,msg:'a clicked'},{id:2,msg:'b clicked'},{id:3,msg:'c clicked'},{id:4,msg:'d clicked'},
{id:5,msg:'e clicked'}];
var counter = $scope.activityFeed.length;

var actFeedArr = [{id:1,msg:'a clicked'},{id:2,msg:'b clicked'},{id:3,msg:'c clicked'},{id:4,msg:'d clicked'},
{id:5,msg:'e clicked'},{id:6,msg:'f clicked'},{id:7,msg:'g clicked'},{id:8,msg:'h clicked'},{id:9,msg:'i clicked'},
{id:10,msg:'j clicked'},{id:11,msg:'k clicked'},{id:12,msg:'l clicked'},{id:13,msg:'m clicked'},{id:14,msg:'n clicked'},
{id:15,msg:'o clicked'},{id:16,msg:'p clicked'},{id:17,msg:'q clicked'},{id:18,msg:'r clicked'},{id:19,msg:'s clicked'},
{id:20,msg:'w clicked'}];

 $interval(function() {activityFeedArray2();} , 1000);
  function activityFeedArray2() {
    $scope.activityFeed.shift();
    $scope.activityFeed.push(actFeedArr[counter]);
    counter=counter+1;
    if(counter>=actFeedArr.length) {
        counter = counter-actFeedArr.length;
    };
    };
   });

在html页面。

<!DOCTYPE html>
<html ng-app="activityFeedApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<head>
    <title>Activity Feed</title>
</head>
<body>
    <div ng-controller="activityFeedCntrl">
     <p>Activity Feed</p>
         <table>
            <tr ng-repeat="feed in activityFeed track by $index">
            <td ng-bind="feed.id"></td>
                <td ng-bind="feed.msg"></td>
            </tr>
        </table> 
    </div>
<script src="activityFeedApp.js" ></script>
<script src="activityFeedCntrl.js" ></script>
</body>
</html>
相关文章：