angularjs中判斷ng-repeat是否迭代完的實(shí)例
angular中的ng-repeat指令會(huì)自動(dòng)迭代數(shù)組然后你就可以將這些迭代的數(shù)據(jù)在頁(yè)面逐條顯示。但是怎樣才知道數(shù)據(jù)迭代完了，其實(shí)還是有方法的，今天就介紹一種方法來(lái)判斷ng-repeat是否已經(jīng)迭代完。眾所周知ng-repeat會(huì)為每一個(gè)repeat的對(duì)象創(chuàng)建一個(gè)控制器，我們就利用這個(gè)來(lái)判斷。
首先我們要定義一個(gè)數(shù)組
$scope.testArrray = [
{id: 1, value: 1},
{id: 2, value: 2},
{id: 3, value: 3},
{id: 4, value: 4},
{id: 5, value: 5},
{id: 6, value: 6},
{id: 7, value: 7},
{id: 8, value: 8}];
然后我們r(jià)epeat這個(gè)數(shù)組在html頁(yè)面中使用ng-repeat指令，并為他們創(chuàng)建控制器。
<body ng-controller="app1Controller">
<content>
<!--為每一個(gè)repeat的對(duì)象創(chuàng)建一個(gè)itemRepeatCtrl控制器-->
<div class="item" ng-controller="itemReaptCtrl" ng-repeat="li in testArrray track by li.id">
{{li.value}}
</div>
</content>
</body>
接著就是為他們創(chuàng)建子控制器
.controller('itemReaptCtrl', ['$scope', function ($scope) {
$scope.$watch($scope.$last, function () {
console.log("執(zhí)行了一次!");
if($scope.$last){ //$scope.$last是來(lái)判斷是否是最后一個(gè)ng-repeat對(duì)象， 如果是則$scope.$last的值為true ,反之則為false
$scope.$emit('ngRepeatFinished'); // 由于是向父控制器中發(fā)布廣播，所有用$emit
}
})
}])
然后在父控制器中接受廣播
$scope.$on('ngRepeatFinished', function (data) { //接收廣播，一旦repeat結(jié)束就會(huì)執(zhí)行
console.log("恭喜你，repeat結(jié)束了！");
});
看控制器中有打印，證明此方法有效
有時(shí)候需要在ng-repeat 指令repeat結(jié)束之后進(jìn)行一些操作時(shí)便可以使用這種方法。
以上這篇angularjs中判斷ng-repeat是否迭代完的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
angularjs $http實(shí)現(xiàn)form表單提交示例
這篇文章主要介紹了angularjs $http實(shí)現(xiàn)form表單提交示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
AngularJS 模塊詳解及簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 模塊,這里幫大家整理了相關(guān)資料,詳細(xì)介紹了AngularJS的基礎(chǔ)知識(shí),有需要的朋友可以參考下2016-07-07
深入學(xué)習(xí)JavaScript的AngularJS框架中指令的使用方法
這篇文章主要介紹了深入學(xué)習(xí)JavaScript的AngularJS框架中指令的使用方法,指令的使用是Angular入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2016-03-03
Angular中自定義Debounce Click指令防止重復(fù)點(diǎn)擊
本篇文章主要介紹了Angular中自定義Debounce Click指令詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本篇文章主要介紹了詳解AngularJS2 Http服務(wù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
淺談AngularJS中$http服務(wù)的簡(jiǎn)單用法
這篇文章主要介紹了淺談AngularJS中$http服務(wù)的簡(jiǎn)單用法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
我們?cè)趹?yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這里的間隔可能很小，甚至讓人感覺(jué)不到區(qū)別；但也可能很長(zhǎng)，這樣會(huì)導(dǎo)致讓我們的用戶看到了沒(méi)有被渲染過(guò)的頁(yè)面。本文將介紹Angular.js中處理頁(yè)面閃爍的方法。2017-03-03
這篇文章主要介紹了Angular 中 select指令用法詳解的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
AngularJS前端頁(yè)面操作之用戶修改密碼功能示例
這篇文章主要介紹了AngularJS前端頁(yè)面操作之用戶修改密碼功能,結(jié)合具體實(shí)例形式分析了AngularJS針對(duì)前端用戶修改密碼的判斷操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實(shí)例
今天小編就為大家分享一篇angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09