ng-repeat to show each elements individually

Question

I am working on angularjs application.

Please find the demo : http://plnkr.co/edit/77CLq8lB0livmtCXLTKa?p=preview

As shown in the demo for the first 3 div's it is displaying the div values after every 5seconds, similarly i want to show for div calling detailsController which is using ng-repeat. I want to show each element of ng-repeat with 5 seconds delay as shown for first 3 divs.

Below is the sample html code

<div ng-controller="MainController" style="width: 100%">
  <div ng-if="show==1">
    11111111111
  </div>

  <div ng-if="show==2">
    2222222222
  </div>

  <div ng-if="show==3">
    333333333
  </div>

  <div ng-if="show==4" ng-controller="detailsController">
    <div ng-repeat="detail in details">
      {{detail.name}} {{$index}} <br> DetailList : {{detailsList}}
    </div>
  </div>
</div>

As shown in the demo for first 3 div's it is showing as a slide each with 5 seconds delay. Similarly i want to show each element in the the list iterating with ng-repeat with 5 seconds delay instead of displaying all the elements in the list as shown in the demo. Any suggestions would be helpful.

Answer 1

You can check if show == $index .

<div ng-repeat="detail in details">
   <div ng-if="show==$index">
      {{detail.name}} {{$index}} <br>
      DetailList : {{detailsList}}
   </div>
</div>

http://plnkr.co/edit/5OvcToWEVFidrDnk9NTo?p=preview

Answer 2

You need to store your detailsList variable inside $rootScope , then use {{details[detailsList].name}} in your template. Update detailsList inside the same interval of MainController . Do not use two separate intervals for this because they run at the same time, so you don't see the updates.

Here is a working plunkr demo .

index.html

<div ng-if="show==4" ng-controller="detailsController">
    <div>
        {{details[detailsList].name}}
    </div>
</div>

app.js

app.controller('MainController', function($scope,$rootScope, $interval) {
    $scope.show = 1;
    $scope.slide = "sample clise";
    $rootScope.detailsList = 0;

    $interval(function() {
        if ($scope.show === 4) {
            if ($rootScope.detailsList < 2) {
                ++$rootScope.detailsList;
            } else {
                $rootScope.detailsList = 0;
                $scope.show = 1;
            }
        }
        else if ($scope.show < 4) {
            ++$scope.show; 
        } else {
            $scope.show = 1;
        }
    }, 5000, 0);
});