Question

我想显示3个li，1秒后这3个li将会向上滑动，接下来的3 li会自动显示在div.#content

<div id="content">
    <ul>
        <li>122</li>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
    </ul>
</div>

我使用jquery做了这件事，但我需要使用angularJs开发，我不是angularjs的专家。 Here你可以看到已经使用jquery完成了。如果有人指导我，我将不胜感激。

Answer 1

如果只是翻译，请运行代码段

＆＃13;

print

＆＃13;

(function ()
{
    var app = angular.module("app", []);

    function HomeController($interval)
    {
        var vm = this;        
        var i = 2,
            $ul = angular.element('#content ul');
        int = $interval(function ()
            {
                angular.element('li', $ul).slideUp();
                angular.element('li' + (i == -1 ? '' : ':gt(' + i + ')') + ':lt(3)', $ul).slideDown();
                i += 3;
                if (i + 1 >= angular.element('li', $ul).length) i = -1;
            },
            2000);
    }

    app.controller("HomeController", ["$interval",HomeController]);

})();

＆＃13;

Answer 2

请完成此plunkr。我已经删除了jQuery但使用了一些数学逻辑。

var i = 0;

    var mainList=[1,2,3,4,5,6,7,8,9];

    $scope.list = [mainList[i],mainList[i+1],mainList[i+2]];

    $ul = angular.element('#content ul');

    int = $interval(function ()
        {
             if(i>8){
              i=0;
            }
            $scope.list=[mainList[i],mainList[i+1],mainList[i+2]];
        },
        2000);

Answer 3

试试这个：

angular.module('app', [])
    .directive('slideRoller',function($interval){
        return {
            restrict:'A',
            link:function(scope,ele,attrs){
                var interval = attrs.interval || 2000;
                var children = ele.find('li');

                var start = -1;
                roll(start);
                $interval(function(){
                    start += 3;
                    if(start>=children.length-3){
                        start = -1;
                    }
                    roll(start);
                },interval);

                function roll(i){
                    angular.forEach(children,function(val,index){
                        if(index>i && index<=i+3){
                            angular.element(val).removeClass('slide-up').addClass('slide-down');
                        }else{
                            angular.element(val).removeClass('slide-down').addClass('slide-up');
                        }
                    });
                }
            }
        }
    })
;

.slide-up{
	max-height: 0;
	overflow-y: hidden;
}

.slide-down {
	max-height: 10em;
	-webkit-transition: max-height 0.5s ease-in-out;
	-moz-transition: max-height 0.5s ease-in-out;
	-o-transition: max-height 0.5s ease-in-out;
	transition: max-height 0.5s ease-in-out;
}

<html>
<head>
    <title>Single Demo</title>
    <script src="//cdn.bootcss.com/angular.js/1.4.7/angular.js"></script>

</head>

<body ng-app="app">
    <div class="container">
        <ul slide-roller interval="1000">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
</body>
</html>

Answer 4

这不是答案，只是为您提供的信息

如果您导入jQuery，则AngularJs会实施它，因此使用jQuery并不是真的错误。

相反，如果您不想导入jQuery，AngularJs会回归jQlite（与jQuery非常相似）

来自官方文件：

Angular是否使用jQuery库？   是的，当应用程序被引导时，Angular可以使用jQuery，如果它存在于您的应用程序中。如果你的脚本路径中没有jQuery，Angular会回退到我们称之为jQLite的jQuery子集的实现。

Angular 1.3仅支持jQuery 2.1或更高版本。 jQuery 1.7和更新版本可能与Angular正常工作，但我们不保证。

常见问题解答页面：https://docs.angularjs.org/misc/faq

Angular jqLite：https://docs.angularjs.org/api/ng/function/angular.element

如何使用AngularJS显示具体的li数？

4 个答案: