如何使用 AngularJS 显示特定数量的 li？
Posted
技术标签:
【中文标题】如何使用 AngularJS 显示特定数量的 li？【英文标题】：How can show specific number of li using AngularJS? 【发布时间】：2016-09-07 23:35:07 【问题描述】：我想显示 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 完成了。如果有人指导我，我将不胜感激。
【问题讨论】：
你可以试试 $interval，它是 Angular 对 window.setInterval 的封装。请参阅官方文档。 This answer to a similar question 有一个指令，可以在没有 jQuery 的 Angular 中实现 .slideUp/Down。 【参考方案1】：如果只是翻译，则运行 sn -p
(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]);
)();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Angular JS App</title>
</head>
<body>
<div class="container" ng-controller="HomeController as homeCtrl">
<div id="content">
<ul>
<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>
</div>
</body>
</html>【讨论】：
感谢分享知识它的工作，但我们可以删除 jquery，因为我不想使用 jquery。 问题是slideUp()和slideDown()都来自jQuery！【参考方案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);
【讨论】：
【参考方案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>【讨论】：
【参考方案4】：这不是答案，只是给你的信息
如果你导入jQuery，AngularJs 会实现它，所以使用jQuery 并没有错。
相反，如果你不想导入jQuery，AngularJs 会退回到jQlite（真的类似于jQuery）
来自官方文档：
Angular 是否使用 jQuery 库？ 是的，如果在引导应用程序时，Angular 存在于您的应用程序中，则 Angular 可以使用 jQuery。如果 jQuery 不在您的脚本路径中，Angular 将回退到它自己的 jQuery 子集实现，我们称之为 jQLite。
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
【讨论】：
我们可以同时使用 Jquery 和 angularjs 吗？ @ayazkhan 是的...不过编码风格会有所不同。 你可以，你可以使用angular来做幻灯片效果，而不是jQuery(...).slideUp()你会使用angular.element(...).slideUp()，因为angular会从jQuery导入slideUp方法（它只有在你import jquery 或者 jqLite 上存在这个方法）以上是关于如何使用 AngularJS 显示特定数量的 li？的主要内容，如果未能解决你的问题，请参考以下文章