Link to home
Start Free TrialLog in
Avatar of Steve Tinsley
Steve TinsleyFlag 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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Have you read the Angular documentation on ngAnimate?

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

Start there.
Avatar of 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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Would you be able to give an example? Im very new to this.
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.