Question

我是AngularJs的新手，我在jQuery中编写了一个滑块函数。现在我想将thih函数转换为Angular。这是我的代码::

   <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();
        });

我已经链接了jQuery.min库并在document.ready中调用了该函数请帮我看看如何在AngularJS中制作

Answer 1

HTML中的

：

$(function() {
    $("tr").click(function() {
        var fid = document.getElementById("id").value;
        if (fid != "ID") {
            //remove background color
        }
        var id = $(this).children().first().html();
        document.getElementById("id").value = '' + id;
        $(this).css('backgroundColor', '#000');
    })
})

控制器中的

：

<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">

如何将jQuery函数转换为角度js？

1 个答案: