angularjs ng-repeat 元素渲染完成

最新推荐文章于 2021-08-11 19:42:22 发布

曹振华

最新推荐文章于 2021-08-11 19:42:22 发布

阅读量223

点赞数

分类专栏： angularjs 文章标签： angularjs ng-repeat 渲染完成

本文链接：https://blog.csdn.net/chadcao/article/details/110843271

版权

angularjs 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				$scope.students = [{
						studentno: 's001',
						studentname: '学生1',
						address: '浙江',
					},
					{
						studentno: 's002',
						studentname: '学生2',
						address: '浙江',
					},
					{
						studentno: 's003',
						studentname: '学生3',
						address: '浙江',
					},
				];
				$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
					console.log(document.getElementsByClassName('studentno').length);
				});
			});
			app.directive('repeatFinish', function($timeout) {
				return {
					link: function(scope, element, attr) {
						if (scope.$last === true) {
							$timeout(function() {
								scope.$emit('ngRepeatFinished');
							});
						}
					}
				}
			});
		</script>
	</head>
	<body ng-controller="my_controller">
		<div>
			<ul>
				<li ng-repeat="item in students" repeat-finish>
					<span class="studentno">{{item.studentno}}</span>
					<span class="studentname">{{item.studentname}}</span>
					<span class="address">{{item.address}}</span>
				</li>
			</ul>
		</div>
	</body>
</html>

曹振华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs ng-repeat 元素渲染完成

<!DOCTYPE html><html ng-app="my_app"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"> var app.
复制链接

扫一扫

专栏目录