AngularJS: Implementing a Carousel Chart effect

To implement this function, you can https://github.com/sroze/ngInfiniteScroll this third-party control. The implementation steps are as follows:

1. Download Ng-infinite-scroll.js program http://sroze.github.io/ngInfiniteScroll/current version is 1.0.0

2. If you are using jQuery2.0 above, you will also need to modify the Ng-infinite-scroll.js program to change all the $window.xxx to $ (window). XXX, elem.xxx change to $ (elem). xxx

3. Introduction of script in HTML

<Scripttype= ' Text/javascript 'src= ' Path/to/jquery.min.js '></Script><Scripttype= ' Text/javascript 'src= ' Path/to/angular.min.js '></Script><Scripttype= ' Text/javascript 'src= ' Path/to/ng-infinite-scroll.min.js '></Script>

4. The HTML sample code is as follows:

<!--Carousel Diagram -<Div>    <Carouselinterval= "Myinterval">        <Slideng-repeat= "Slide in slides"Active= "Slide.active">            <imgng-src= "{{slide.image}}"style= "Margin:auto;">            <Divclass= "Carousel-caption">                <P>{{Slide.text}}</P>            </Div>        </Slide>    </Carousel></Div>

5. The Postlistcontroller.js code is as follows:

1Ftitappmodule.controller (' Postlistcontroller ', 2     function($scope) {3         //Set the carousel image interval4$scope. Myinterval = 5000;5         //Initialization of carousel graph data6         varSlides = $scope. Slides = [];7         //Add a carousel diagram source8Slides.push ({image: '/content/images/carousel_1.png ', text: ' Dear you, Happy Valentine's Day ') });9Slides.push ({image: '/content/images/carousel_1.png ', text: ' Dear you, Happy Valentine's Day ') });Ten});

Final effect: