Avatar of Steve Tinsley
Steve Tinsley
Flag for United Kingdom of Great Britain and Northern Ireland asked on

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

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.
jQueryJavaScriptAJAX

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

Have you read the Angular documentation on ngAnimate?

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

Start there.
Steve Tinsley

ASKER
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

ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Steve Tinsley

ASKER
Would you be able to give an example? Im very new to this.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Julian Hansen

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.