This time I will show you how to confirm that ng-repeat rendering is completed, and what are the precautions for confirming that ng-repeat rendering is completed. The following is a practical case, let's take a look.
A certain project, there is a list element in my web page, the style is as follows:
##In fact it It is formed through ng-
of Angular
. The code in html
is: <pre class="brush:php;toolbar:false"></pre>
<li>{{ list.name }}</li>
New list at the bottom of the picture
, after clicking it, a new list
object will be push
into the lists
array. At this time, the page will be automatically rendered, and a # will be added accordingly. ##
, as follows:
Note that MyList1
active state (
class="active"), my requirement is to set the new
list to
active## after adding list #, that is, after adding it, it will become the following style:
At first I tried to go to ## in the function corresponding to
#listsAfter
a new list
object in the array, use document
.getElementById
to get the new <li>
object, and then add a class="active"<a href="http://www.php.cn/code/658.html" target="_blank"> to it. It turns out that the obtained </a>DOM
object is null
. After Search
found that the reason is: after pushing the push
object to the lists
array, the array changes, and all <li> will be re-rendered. After push
is completed, immediately look for the newly added DOM
object. DOM
has not been rendered yet, so it cannot be obtained. The solution is: use the AngularJS
instruction to monitor whether the
ng-repeat
is completed, and after the rendering is completed, get the newly added <a href="http://www.php.cn/angularjs/angularjs-examples.html" target="_blank">Object, there is a lot of related content on this Internet, the code is as follows: </a><pre class="brush:php;toolbar:false">myapp.directive('repeatFinish', function ($timeout) {
return {
restrict: "C",
link: function (scope, element, attr) {
if(scope.$last === true){
$timeout(function () {
scope.change_list(element[0]);
}, 10);
}
}
}
});</pre>
The above code creates a command named repeatFinish
, restrict: "C "
means that the instruction is placed in
of DOM
(camel case, i.e. class="repeat-finish"
), scope.$ last === true
means that the last object has been rendered, and the change_list
function is executed at this time (defined in the controller
, the function is to change the current active
object cancels active
, and then sets the incoming DOM object to active
), element[0]
can directly get the current The rendered DOM
element. Note that I used $timeout
, and change_list
was executed after 10ms
. I found that using change_list
directly would still not find the DOM.
, the reason is unknown, I look forward to the answer from the master. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Do not use vue Summary of code specification detection methods
The above is the detailed content of How to confirm that ng-repeat rendering is completed. For more information, please follow other related articles on the PHP Chinese website!

1、首先在酷家乐中打开要渲染的设计方案。2、然后在渲染菜单下打开俯视图渲染。3、接着在俯视图渲染界面中点击参数设置中的正交。4、最后调整好模型角度即可点击立即渲染,渲染正交俯视图。

vue页面渲染是异步的。vue采用的是异步渲染,这样可以提升性能;如果不采用异步更新,在每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue会在本轮数据更新后,再去异步更新视图。

Vue报错:无法正确使用v-html渲染动态HTML代码,怎样解决?引言:在Vue开发中,我们常常需要动态渲染HTML代码,以展示富文本内容或动态生成的用户输入。Vue提供了v-html指令来实现这个功能。然而,有时候我们可能会遇到无法正确使用v-html渲染动态HTML代码的问题。本文将探讨这个问题的原因,并提供解决方案。问题描述:在Vue中,当我们使用v

在Vue3中,v-for被视为渲染列表数据的最佳方式。v-for是Vue中的一个指令,它允许开发者遍历一个数组或对象,并为每个项生成一段HTML代码。v-for指令是开发者们可以使用的最强大的模板指令之一。在Vue3中,v-for指令得到了进一步的优化,使用更加简单,更加灵活。Vue3中的v-for指令最大的变化是元素的绑定。在Vue2中,使用v-for指令

Vue报错:无法正确使用v-html渲染HTML代码,怎样解决?Vue是一款流行的JavaScript框架,可以帮助我们构建交互式的用户界面。在Vue中,我们可以使用v-html指令将HTML代码渲染到模板中。然而,有时我们可能会遇到一个问题:无法正确使用v-html渲染HTML代码。本文将介绍一些常见原因和解决方法,帮助您解决这个问题。第一种可能的原因是未

如何利用Vue实现图片的分级和渲染处理?概述在现代web应用的开发中,图片的处理是一个非常常见的需求。而利用Vue.js,一个流行的JavaScript框架,实现图片的分级和渲染处理变得非常简单和高效。本文将展示如何通过Vue.js来实现图片的分级和渲染处理,并附带代码示例。步骤一:创建Vue实例首先,我们需要创建一个Vue实例来管理图片的数据和逻辑。在HT

重绘和回流对渲染阶段的影响:谁更重要?当网页进行渲染时,浏览器会按照一定的顺序执行一系列操作,以显示页面内容。其中,重绘和回流是渲染过程中的两个重要步骤。本文将探讨重绘和回流对渲染阶段的影响,并分析它们的重要性。重绘和回流的含义和区别在了解重绘和回流对渲染的影响之前,我们先来了解一下它们的含义和区别。重绘(Repaint)是指当元素的样式发生变化,但并未影响

理解Canvas渲染模式的原理和实现,需要具体代码示例首先,我们需要明确Canvas是HTML5提供的绘图API,它允许我们在浏览器中使用JavaScript来绘制图形、动画和其他可视化效果。Canvas可以使用两种渲染模式进行绘制:2D渲染模式和WebGL渲染模式。2D渲染模式是Canvas默认的模式,它使用HTML5中Canvas元素的2D上下文来绘制图


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 Mac version
God-level code editing software (SublimeText3)

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1
Powerful PHP integrated development environment
