How to loop through an array in angular controller and display one item at a time

Question

I would love to loop through the following array in my controller,

var array = ['text1', 'text2', 'text3'];

Then display an item at a time in my view using angular $interval.

When it gets to the last item, it should start again from item 1. Only one item should be displayed at a time.

Please don't judge, sounds easy but this is my 2nd week or so with angularjs.

It's a basic carousel - just have to think through it. You need an activeItem to denote which item is currently being displayed - and each interval, check the index of the active item and go to the next. If you're at the last index, start at the beginning. — tymeJV
– tymeJV, Commented Aug 5, 2016 at 12:47
Possible duplicate of How do you rotate text values in Angular? — Hemant Metalia
– Hemant Metalia, Commented Aug 5, 2016 at 12:59

Yosvel Quintero · Accepted Answer · 2016-08-05 20:31:04Z

3

Updated answer according to @Nicholas Robinson and @4castle suggestion on the comments:

angular
    .module('MyApp', [])
    .controller('MyController', function($scope, $interval) {
        $scope.array = ['text1', 'text2', 'text3'];

        $scope.showedItem = 0;

        $interval(function() {
            $scope.showedItem = ++$scope.showedItem % $scope.array.length;
        }, 1000);
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp" ng-controller="MyController">
    <!-- <p ng-repeat="item in array" ng-show="showedItem === $index">{{item}}</p> -->
    <!-- Improvements without the need of ng-repeat and ng-show -->
    <p>{{ array[showedItem] }}</p>
</div>

Updated answer according to @Nicholas Robinson and @4castle suggestion on the comments.

edited Aug 5, 2016 at 20:31

answered Aug 5, 2016 at 12:55

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicholas Robinson Over a year ago

Instead of $scope.showedItem++; if ($scope.showedItem > $scope.array.length){$scope.showedItem = 0;} you can just use $scope.showedItem = ++$scope.showedItem % $scope.array.length - Works the same

castletheperson Over a year ago

You don't need ng-repeat or ng-show. Just bind to {{ array[showedItem] }}

Collectives™ on Stack Overflow

How to loop through an array in angular controller and display one item at a time

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related