How to convert jQuery function into angular js?

Question

I am very new to AngularJs, I have written a slider function in jQuery. Now I want to convert thih function into Angular. Here is my code below::

   <div class="slide-container">
        <div class="slide-scroller" style="left: 0px;">
            <div class="slideContent" style="background-color: #f00;">one</div>
            <div class="slideContent" style="background-color: #0f0;">two</div>
            <div class="slideContent" style="background-color: #00f;">three</div>
        </div>
    </div>
    <input type="button" id="left">
    <input type="button" id="right">

        .slide-container {height: 100px; overflow: hidden; position: relative;}
        .slide-scroller { height: 100px; overflow:hidden;  position: absolute; top: 0px;}
        .slide-scroller .slideContent { height: 100px; overflow: hidden; float: left;}

      function slider() {

           var slideWidth, speed, sc, slideScroller, scSlide, totalSlide, scrollerWidth, maxLeft;

           slideWidth = $(window).width();          // [ get the device width ]
           speed = 0.6;                             // [ control speed 1 = 1s] 
           sc = $(".slide-container");              // [ getting the container ]
           slideScroller = $('.slide-scroller');    // [ getting slider scroller ]
           scSlide = $('.slideContent');            // [ getting slide contetnts ]
           totalSlide = $(scSlide).length;          // [ total slide contents ]
           scrollerWidth = totalSlide * slideWidth; // [ slide scroller width ]

           maxLeft = -parseInt(scrollerWidth) + parseInt(slideWidth); // [maxmimum left slide value]

           // adding some initial attributes
            $(sc && scSlide).css({width: slideWidth});
            $(slideScroller).css({width: scrollerWidth});
            $(slideScroller).css('transition', 'all ease '+speed+'s');

            // left click function

            $("#left").click(function () {
                var xvalue = $(slideScroller).css('left'); //console.log('left :: ', xvalue);
                var newvalue = parseInt(xvalue) - parseInt(slideWidth); //  console.log('newValue :: ', newvalue);
                if (newvalue >= maxLeft) {//console.info('no more left left');                        
                    $(slideScroller).css('left', newvalue);
                }
                else {
                    return false;
                }
            });
            // right click function
            $("#right").click(function () {
                var xvaluetwo = $(slideScroller).css('left'); console.log('lefttwo :: ', xvaluetwo);
                var newvaluetwo = parseInt(xvaluetwo) + parseInt(slideWidth); console.log('newValuetwo :: ', newvaluetwo);
                if (newvaluetwo <= 0) {//console.info('no more right left');
                    $(slideScroller).css('left', newvaluetwo);
                }
                else {
                    return false;
                }
            });
        }

        $(document).ready(function () {
            slider();
        });

I have linked jQuery.min library and called the function in document.ready Please help me how to make in AngularJS

Why do you want to transfer this function? you can use slider() function into angular controller — Sherali Turdiyev, Sep 01 '15 at 13:51
Take a look at [Thinking in AngularJS if I have a jQuery background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). — Nikos Paraskevopoulos, Sep 01 '15 at 13:51
@Subhajit Das. check it answer. if you have questions, let us know — Sherali Turdiyev, Sep 01 '15 at 15:05

score 0 · Answer 1 · answered Sep 01 '15 at 13:55

in HTML:

<div class="slide-container" ng-init="initSlider()">
        <div class="slide-scroller" ng-repeat="item in sliderList" style="left: 0px;">
            <div class="slideContent" style="background-color: {{item.bgColor}}">{item.content}</div>
        </div>
    </div>
    <input type="button" id="left">
    <input type="button" id="right">

in Controller:

$scope.initSlider = function(){
    slider()
}

How to convert jQuery function into angular js?

1 Answers1