[英]ng-repeat to show each elements individually
I am working on angularjs application. 我正在开发angularjs应用程序。
Please find the demo : http://plnkr.co/edit/77CLq8lB0livmtCXLTKa?p=preview 请找到演示: http : //plnkr.co/edit/77CLq8lB0livmtCXLTKa?p=preview
As shown in the demo for the first 3 div's it is displaying the div values after every 5seconds, similarly i want to show for div calling detailsController which is using ng-repeat. 如前3个div的演示中所示,它每5秒显示一次div值,类似地,我想显示使用ng-repeat的div调用detailsController。 I want to show each element of ng-repeat with 5 seconds delay as shown for first 3 divs.
我想以5秒的延迟显示ng-repeat的每个元素,如前3个div所示。
Below is the sample html code 以下是示例html代码
<div ng-controller="MainController" style="width: 100%">
<div ng-if="show==1">
11111111111
</div>
<div ng-if="show==2">
2222222222
</div>
<div ng-if="show==3">
333333333
</div>
<div ng-if="show==4" ng-controller="detailsController">
<div ng-repeat="detail in details">
{{detail.name}} {{$index}} <br> DetailList : {{detailsList}}
</div>
</div>
</div>
As shown in the demo for first 3 div's it is showing as a slide each with 5 seconds delay. 如前3个div的演示中所示,每个幻灯片有5秒的延迟。 Similarly i want to show each element in the the list iterating with ng-repeat with 5 seconds delay instead of displaying all the elements in the list as shown in the demo.
同样,我想显示列表中的每个元素,并使用ng-repeat进行5秒钟的延迟迭代,而不是像演示中那样显示列表中的所有元素。 Any suggestions would be helpful.
任何的意见都将会有帮助。
You can check if show == $index
. 您可以检查
show == $index
。
<div ng-repeat="detail in details">
<div ng-if="show==$index">
{{detail.name}} {{$index}} <br>
DetailList : {{detailsList}}
</div>
</div>
http://plnkr.co/edit/5OvcToWEVFidrDnk9NTo?p=preview http://plnkr.co/edit/5OvcToWEVFidrDnk9NTo?p=预览
You need to store your detailsList
variable inside $rootScope
, then use {{details[detailsList].name}}
in your template. 您需要将您的
detailsList
变量存储在$rootScope
,然后在模板中使用{{details[detailsList].name}}
。 Update detailsList
inside the same interval of MainController
. 更新
detailsList
在MainController
的相同间隔内。 Do not use two separate intervals for this because they run at the same time, so you don't see the updates. 请勿为此使用两个单独的间隔,因为它们是同时运行的,因此您看不到更新。
Here is a working plunkr demo . 这是工作中的plunkr演示 。
index.html index.html
<div ng-if="show==4" ng-controller="detailsController">
<div>
{{details[detailsList].name}}
</div>
</div>
app.js app.js
app.controller('MainController', function($scope,$rootScope, $interval) {
$scope.show = 1;
$scope.slide = "sample clise";
$rootScope.detailsList = 0;
$interval(function() {
if ($scope.show === 4) {
if ($rootScope.detailsList < 2) {
++$rootScope.detailsList;
} else {
$rootScope.detailsList = 0;
$scope.show = 1;
}
}
else if ($scope.show < 4) {
++$scope.show;
} else {
$scope.show = 1;
}
}, 5000, 0);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.