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.
Currently the data gets listed on the screen
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.
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();
});
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>
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
Last Comment
Julian Hansen
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.
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);
})
}
});
ASKER CERTIFIED SOLUTION
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.
ASKER
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.
If you don't come right post back and I will pick up when I am back.
https://docs.angularjs.org/api/ngAnimate
Start there.