angularJS指令ng-repeat生成的dom元素js獲取不到
用ng-repeat生成的元素用js怎麼也獲取不到
這個其中原由是:angular擁有自動化渲染DOM的特性,它能幫助我們專注於操作資料,而頁面的渲染則由angular自身來完成。這就造成了 ng-repeat 迴圈完成後angular並不會告訴我們dom渲染完了;換句話說就是不知道angular渲染dom何時完成(得不到生成的元素是因為這個元素還沒有渲染出來)。
也就是說要找一個方法使你知道什麼時候angular渲染dom完成了,你再才來操作dom,得到你想要的元素、進行操作。。。。
<div ng-repeat="item in items" on-finish>
<div>{{item.name}}}<div>
</div>
//jsvar module = angular.module('fang', [])
.directive('onFinish', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}});
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
//這裡寫獲取dom的操作,
});
這樣你就可以用js找到ng-repeat生成的元素了;並進行相關元素操作。
相關推薦
angularJS指令ng-repeat生成的dom元素js獲取不到
用ng-repeat生成的元素用js怎麼也獲取不到 這個其中原由是:angular擁有自動化渲染DOM的特性,它能幫助我們專注於操作資料,而頁面的渲染則由angular自身來完成。這就造成了 ng-repeat 迴圈完成後angular並不會告訴我們dom渲染完了;換句
angularJs中ng-repeat遍歷動態生成的表單元素繫結ng-model無效的問題
我在做練習中偶然遇到這個問題,與大家分享一下。我也是剛開始接觸angularJs,相信也有人同樣遇到過。 問題描述:在使用anjularJs框架核心模組ng雙向資料繫結,在ng-repeat遍歷物件或陣列的時候,用ng-model繫結動態生成表單元素時,利用$sco
angularjs(ng-repeat和filter)生成多級選單
需求如下: 後端通過資料庫生成無序的陣列,傳到前端,資料結構如下(pid即parentId,如本級的pid為4,則它上一級的menu_id為4): [ {pid:1,menu_id:7}, {pid:4,menu_id
AngularJS的ng-repeat迴圈中如何獲得被迴圈列表的索引值
使用angularJS框架的話都需要引入angular.min.js檔案,這個想必各位大佬都懂得,我就不多說了。 這裡主要說說AngularJS的ng-repeat迴圈中如何獲得被迴圈列表的索引值。 假如有一個表格: 程式碼如下: <table class="tabl
angularjs中,ng-hide隱藏的元素,設定不了style
做一個搜尋歷史框,input獲得焦點就顯示搜尋歷史框,框寬度與input框同寬(因為input後還有一個搜尋按鈕呢)否則不顯示。 在獲得焦點的函式中,已經把flag賦值為true了,卻還是不能執行下面
AngularJs 在ng-repeat中動態使用ng-model進行雙向資料繫結
首先說明一下功能需求: 當點選一次增加按鈕的時候,下方就會多一行輸入框; 當點選一次刪除按鈕的時候,所點選的刪除按鈕那行的輸入框會消失; 當點選列印資訊按鈕的時候,把所有輸入框中的資料讀取出來,並列印到控制檯上。 由此可看出,帶有刪除按鈕的這部分DIV是動態的。
AngularJS中ng-repeat渲染完成事件和中間變數的引用
ng-repeat渲染完成事件 因為在用AngularJS期間, 經常用到ng-repeat, 而有時需要在其渲染完成時操作已經渲染的物件, 所以特在此記錄一下新增渲染事件的方法, 以方便以後的使用; 程式碼如下 myApp.directive('onRepeatFin
AngularJS中ng-repeat使用心得
ng-repeat這樣類似的指令是會建立一個新的作用域的,並且建立的新的作用域是原型繼承的。這點其實和我的一篇《AngularUI之Modal的子作用域研究 》類似,這次我也對指令的子作用域進行了研究,發現他們的建立子作用的方式是一樣的。 下面是我的實驗程式碼
解決AngularJS中ng-repeat不更新檢視的問題
最近寫AngularJS專案中,遇到一個問題,先對陣列進行賦值,ng--repeat正常工作,然後對陣列進行修改,ng-repeat似乎沒有工作,檢視沒有更新。 原因是ng-repeat會已預設值排序,由於我的陣列中的元素有重複,所以ng-repeat沒有對重複的元素進行
Angularjs中ng-repeat與移動端滑動外掛iScroll的衝突
IScroll是在移動端開發的過程中會經常使用到的一個外掛,但當其與angularjs中的ng-repeat指令配合使用時,很有可能會導致iScroll外掛失效或者滑動不正常,另外當ng-repeat迴圈的列表動態增加時也會導致滑動不正常。 滑動不正常原因:
AngularJS中 ng-repeat 排序後的 $index變化
“有客戶投訴,說在刪除指定的某條記錄時,結果刪掉的卻是另外一條記錄!” 看起來是個很嚴重的BUG。 有一次我們在工作中碰到了這個問題。 要定位這個BUG非常麻煩, 因為客戶也不清楚如何重現這個問題。 後來發現這個Bug是由於在 ng-repeat 中使用了 $inde
ng-repeat中DOM的重新渲染機制
引子:專案中遇到一個BUG,使用ui-bootstrap-tpls中的carousel外掛設定輪播圖時,改變ng-repeat中陣列其中一個元素時,輪播圖的順序發生了變化。 程式碼如下: <div carousel interval="ap
關於AngularJS中ng-repeat問題(問卷遍歷問題)
option_val = []; var count = 0; $scope.submitText = function () { var type = document.getElementsByTagName("input");
【AngularJS】Angularjs設定ng-repeat裡面迴圈出來的select的預設值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> &l
AngularJs使用ng-repeat實現資料迴圈展示的效果
一般情況下,後端給前端傳輸資料,前端都是用foreach來迴圈輸出,現在使用AngularJs也能實現類似的功能,方法如下:01<!doctype html>02<html lang=
js獲取不帶單位的像素值
replace button onclick num parseint 數值 調用 寬度 字體 所謂獲取不帶單位的像素值就是獲取比如元素的寬度、高度、字體大小、外邊距、內邊距等值但是去掉像素單位。 比如:某一個元素的寬度是100px,現在我要獲取這個這個值但是不帶
Tomcat7在前端JS獲取不到cookie問題(附上獲取cookie/JS)
tomcat7中的context.xml加上這個屬性就可以了, 如果程式設計師後端控制cookie.setHttpOnly(false) window.onload=function (){ function getSessionId(){ var c_na
js 獲取不到div的寬度 offsetWidth width
1、通過document.getElementById("zhankaiStyle").style.width 或者是 this.$refs.mingzi.style.width 獲取 只能通過在行內樣式表中設定寬度才可以獲得 (1) <
css設定height:100%,用js獲取不到高度值問題
工作中用到的amaze ui的popup中的heigh:100%;在專案中我需要獲取大屏popup的高的具體的畫素值,然而我要說的是,總共有兩點:一、用純js獲取obj.style.height、obg.innerHeight和obj.offsetHeight獲取, c
js獲取不到display的屬性
今天偶然看到以前遺留的一個問題,現在用谷歌除錯了一下,明白了,特此記錄一下。 原問題+code: 為什麼我的點選事件第一次點選沒反應? <html> <head> <style type="text/css"> body{