Question

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

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

Answer 1

以下代码运行正常。

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>

Answer 2

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

从n个项目的数组中一次显示5个项目，并再次从angularjs中的biginning重复

2 个答案: