Javascript 从n个项目的数组中一次显示5个项目，然后在angularjs中重复从二元开始的操作_Javascript_Arrays_Angularjs

Javascript 从n个项目的数组中一次显示5个项目，然后在angularjs中重复从二元开始的操作

javascript arrays angularjs

Javascript 从n个项目的数组中一次显示5个项目，然后在angularjs中重复从二元开始的操作,javascript,arrays,angularjs,Javascript,Arrays,Angularjs,我是angularJs的新手，我的情况是，我必须显示多个项目数组中的5个项目。也就是说，首先显示1-5个项目，然后在一段时间后，比如说2-3秒，在顶部插入第6个项目，然后从底部移除第一个项目。阵列在顶部显示为第五，然后显示为第四，依此类推。因此，每次用下一个项目替换顶部项目，并移除底部项目。当显示最后一个项目时，也从第一个项目返回。即当显示最后一项时，下一项应为第一项 $scope.activityFeedArray = function() { $scope.activityF

我是angularJs的新手，我的情况是，我必须显示多个项目数组中的5个项目。也就是说，首先显示1-5个项目，然后在一段时间后，比如说2-3秒，在顶部插入第6个项目，然后从底部移除第一个项目。阵列在顶部显示为第五，然后显示为第四，依此类推。因此，每次用下一个项目替换顶部项目，并移除底部项目。当显示最后一个项目时，也从第一个项目返回。即当显示最后一项时，下一项应为第一项

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

下面是运行良好的代码

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>


活动提要
活动提要

使用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;
    };
    };

不，我的应用程序需要它，只需实现一个简单的FILO队列并将其作为模型附加即可。你有什么样的例子吗。不过我会试试。在一个时间间隔内有很多方法可以做到这一点。向我们展示您刚刚获取的列表，并使用ng repeat显示项目。现在我想修改它，以便如上所述显示。我不知道如何以上述方式遍历数组，请告诉我任何一种方法。