Loop through li - Fade In / Fade Out - repeat - Using Angularjs

Steve Tinsley
Steve Tinsley used Ask the Experts™
on
I have just started using Angularjs.... I have created a simple polling script to pull data from a php script.

discussionApp.controller('ViewCtrl', function($scope, $timeout, $http /* , $location,  */) {
    console.log("View Controller");
    $scope.pageClass = 'page-view';


   
    $scope.contents = [];
    lastID = "0";


        var getData = function() {
            $http.post('getData.php?id='+lastID)
            .success(function(data, status) {
                //$scope.contents = data;

                if (data != undefined) {
                    Array.prototype.push.apply($scope.contents, data);

                    lastID = $scope.contents[$scope.contents.length - 1].discussionID;
                    console.log("LAST ID: "+lastID);
                }
            })
            .error(function (data, status) {
                console.log("ERROR: "+status)
                $scope.status = status;
            });

            $timeout(function() {
                $scope.value++;
                getData();
            }, 50000);

            //showNextImage();
        };

        //Start function getData()
        getData();


});

Open in new window



Currently the data gets listed on the screen

      <div>
        <ul id="allImages">
          <li ng-repeat="content in contents" class="{{content.discussionID}} images">
            {{content.discussionID}} - {{content.discussionName}} - {{content.discussionText}}
          </li>
        </ul>
      </div>

Open in new window


I would like to create a function that fades in one li ... waits 2 seconds ... then fades out.
Once it gets the end of the list, start again.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Julian Hansen
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Have you read the Angular documentation on ngAnimate?

https://docs.angularjs.org/api/ngAnimate

Start there.
Steve Tinsley

Author

Commented:
I have seen that.... but I thought it may be better to do it in the controller....

I have managed to get something working... with a lot of trial and error.
What do you think?
The end solution could have an image list array of several 100 images... being added to all the time.


/**
 * Controls the View
 */
discussionApp.controller('ViewCtrl', function($scope, $timeout, $http /* , $location,  */) {
    console.log("View Controller");
    $scope.pageClass = 'page-view';


    $scope.contents = [];
    $scope.images = [];
    
    var lastID = "0";

        var getData = function() {
            $http.post('getData.php?id='+lastID)
            .success(function(data, status) {
                //$scope.contents = data;

                if(data.length > 0){  
                    Array.prototype.push.apply($scope.contents, data);
                    Array.prototype.push.apply($scope.images, data);

                    lastID = $scope.contents[$scope.contents.length - 1].discussionID;
                    console.log("LAST ID: "+lastID);

                    imageLoop( $scope, $timeout ); //Redraw imageLoop

                }
            })
            .error(function (data, status) {
                console.log("ERROR: "+status)
                $scope.status = status;
            });

            $timeout(function() {
                $scope.value++;
                getData();
            }, 500);


        };

        //Start function getData()
        getData();



    function imageLoop( $scope, $timeout ) {
        var update;

            clearTimeout(update);
            console.log("clear");
            $scope.imgIndex = 0;

            update = $timeout(function advanceImage() {
                console.log($scope.images.length);
                $scope.imgIndex = ($scope.imgIndex + 1) % $scope.images.length; 
                $timeout(advanceImage, 1000);
            })
    
    }





});

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
but I thought it may be better to do it in the controller....
No, definitely not in the controller.
All posts I have read suggest this is a bad idea and a directive should be used instead.
Steve Tinsley

Author

Commented:
Would you be able to give an example? Im very new to this.
Julian Hansen
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I can't do anything right now - I am on the road - my advice is to Google ngAnimate there should be many examples out there.

If you don't come right post back and I will pick up when I am back.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial