gpt4 book ai didi

javascript - 如何使用 AngularJS 显示特定数量的 li?

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:47:46 27 4
gpt4 key购买 nike

我想显示 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 完成了。如果有人指导我,我将不胜感激。

最佳答案

如果只是翻译,则运行代码段

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

关于javascript - 如何使用 AngularJS 显示特定数量的 li?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37181745/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com