search
HomeWeb Front-endJS TutorialHow to confirm that ng-repeat rendering is completed

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-

    repeat

    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

    button

    , 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. ##

    <li> , as follows:

    Note that MyList1

    is always in the

    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

    button

    #listsAfter

    push

    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 listsarray, 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: &quot;C&quot;,     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

    class

    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:

    Vue.js Flask to build a single-page App (with code)

    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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
酷家乐怎么渲染正交俯视图_酷家乐渲染正交俯视图教程酷家乐怎么渲染正交俯视图_酷家乐渲染正交俯视图教程Apr 02, 2024 pm 01:10 PM

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

vue页面渲染是同步还是异步vue页面渲染是同步还是异步Dec 13, 2022 pm 07:26 PM

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

Vue报错:无法正确使用v-html渲染动态HTML代码,怎样解决?Vue报错:无法正确使用v-html渲染动态HTML代码,怎样解决?Aug 19, 2023 pm 12:27 PM

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

Vue3中的v-for函数:完美解决列表数据渲染Vue3中的v-for函数:完美解决列表数据渲染Jun 19, 2023 am 08:04 AM

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

Vue报错:无法正确使用v-html渲染HTML代码,怎样解决?Vue报错:无法正确使用v-html渲染HTML代码,怎样解决?Aug 26, 2023 am 11:25 AM

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

如何利用Vue实现图片的分级和渲染处理?如何利用Vue实现图片的分级和渲染处理?Aug 19, 2023 pm 07:53 PM

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

重绘和回流:哪个对渲染阶段的影响更为关键?重绘和回流:哪个对渲染阶段的影响更为关键?Jan 26, 2024 am 10:16 AM

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

掌握Canvas渲染模式的实现及工作原理掌握Canvas渲染模式的实现及工作原理Jan 17, 2024 am 08:40 AM

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

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

DVWA

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

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

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

Zend Studio 13.0.1

Powerful PHP integrated development environment