In AngularJS, showcasing five elements at a time from an array containing 'n' items before looping back to the beginning

Question

In AngularJS, showcasing five elements at a time from an array containing 'n' items before looping back to the beginning

I'm a beginner in AngularJS and facing a scenario where I need to display 5 items from an array containing multiple items. The requirement is to initially show items 1-5 and then, after 2-3 seconds, add a 6th item at the top and remove the last item from the bottom. The array is arranged in such a way that the 5th item is displayed at the top, followed by the 4th item, and so on. This means that each time the top item is replaced with the next one, and the bottom item is removed. Additionally, when the last item is displayed, the next item to be shown should be the first item in the array.

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

javascript arrays angularjs

Answer 1

Answer №1

To implement the functionality in AngularJS, use the $interval function in the following way:

$interval(function() {updateActivityFeed();}, 1000);

function updateActivityFeed() {
    $scope.activityFeed.shift();
    $scope.activityFeed.push(newActivity);
    currentIndex = currentIndex + 1;
    if(currentIndex >= newActivityArray.length) {
        currentIndex = currentIndex - newActivityArray.length;
    }
}

Answer 2

To implement the functionality in AngularJS, use the $interval function in the following way:

$interval(function() {updateActivityFeed();}, 1000);

function updateActivityFeed() {
    $scope.activityFeed.shift();
    $scope.activityFeed.push(newActivity);
    currentIndex = currentIndex + 1;
    if(currentIndex >= newActivityArray.length) {
        currentIndex = currentIndex - newActivityArray.length;
    }
}

Answer 3

Answer №2

Below is the functional code snippet.

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

Regarding the html page setup.

<!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 4

Below is the functional code snippet.

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

Regarding the html page setup.

<!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>

In AngularJS, showcasing five elements at a time from an array containing 'n' items before looping back to the beginning

Answer №1

Answer №2

Similar questions

Troubleshooting Problem with Website Responsiveness on iPhones Using Bootstrap 5

Trouble embedding iframes in local files?

React Navigation ran into an issue with the specified location

The local server for running AngularJS with npm start is experiencing technical difficulties and is

I'm experimenting with using jQuery toggle to switch between text and images on my webpage

Typescript error: The property 'set' is not found on type '{}'

Equal-sized tiles in Highchart treemaps

Python does not display values while using the second for loop

What is the best way to display a modal once an Ajax call is successful

What is the best method for styling arrays displayed by React in version 15 using CSS?

How come my ajax function is not processing when the form is submitted?

Issues with the POST API functionality in an express / node.js application when using mysql database

Using JavaScript functions on HTML data loaded by the jQuery.append() method: A guide

Transforming the response.render method in Express to be a promise-enabled

jQuery AJAX call failing to return to page

Dynamically shift the table footer to the bottom of a scrolling div by utilizing jQuery

Recently embarked on my AngularJS learning journey

Adding HTML after the last item in an ng-repeat directive in AngularJS

Unable to generate STYLE element within iframe header

Tips for updating the content of multiple tabs in a container with just one tab in Bootstrap 4.x