angularjs中判斷ng-repeat是否迭代完的實例
更新時間：2018年09月12日 14:31:09 作者：梁毅
今天小編就為大家分享一篇angularjs中判斷ng-repeat是否迭代完的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
angular中的ng-repeat指令會自動迭代數(shù)組然后你就可以將這些迭代的數(shù)據(jù)在頁面逐條顯示。但是怎樣才知道數(shù)據(jù)迭代完了，其實還是有方法的，今天就介紹一種方法來判斷ng-repeat是否已經(jīng)迭代完。眾所周知ng-repeat會為每一個repeat的對象創(chuàng)建一個控制器，我們就利用這個來判斷。
首先我們要定義一個數(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}];
然后我們repeat這個數(shù)組在html頁面中使用ng-repeat指令，并為他們創(chuàng)建控制器。
<body ng-controller="app1Controller">
<content>
<!--為每一個repeat的對象創(chuàng)建一個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是來判斷是否是最后一個ng-repeat對象， 如果是則$scope.$last的值為true ,反之則為false
$scope.$emit('ngRepeatFinished'); // 由于是向父控制器中發(fā)布廣播，所有用$emit
}
})
}])
然后在父控制器中接受廣播
$scope.$on('ngRepeatFinished', function (data) { //接收廣播，一旦repeat結束就會執(zhí)行
console.log("恭喜你，repeat結束了！");
});
看控制器中有打印，證明此方法有效
有時候需要在ng-repeat 指令repeat結束之后進行一些操作時便可以使用這種方法。
以上這篇angularjs中判斷ng-repeat是否迭代完的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Angular ui-roter 和AngularJS 通過 ocLazyLoad 實現(xiàn)動態(tài)（懶）加載模塊和依賴
這篇文章主要介紹了Angular ui-roter 和AngularJS 通過 ocLazyLoad 實現(xiàn)動態(tài)（懶）加載模塊和依賴,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細介紹了Angular ng-repeat指令實例以及擴展部分，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
組件是一種特殊的指令，使用更簡單的配置項來構建基于組件的應用程序架構.這篇文章主要介紹了Angular組件——父組件調用子組件方法,需要的朋友可以參考下2018-04-04
本篇文章主要介紹了AngulerJS學習之按需動態(tài)加載文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文主要介紹AngularJS的面試題資料整理，這里整理了相關面試題的資料，幫助大家學習理解AngularJS的知識，有興趣的小伙伴可以參考下2016-09-09
下面小編就為大家?guī)硪黄猘ngular.js之路由的選擇方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
大家在使用angularjs的時候，很容易忽略AngularJS自帶指令的作用域問題，有一些指令會產(chǎn)生獨立的自己作用域，造成子級無法與父級作用域雙向綁定的問題。下面我們來看看這些問題，有需要的可以參考借鑒。2016-09-09
本文主要介紹AngularJS表單的知識，這里整理了表單的基礎知識和簡單的示例代碼，有需要的小伙伴可以參考下2016-08-08
angular4 共享服務在多個組件中數(shù)據(jù)通信的示例
本篇文章主要介紹了angular4 共享服務在多個組件中數(shù)據(jù)通信的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Angularjs實現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實現(xiàn)帶查找篩選功能的select下拉框的詳細過程及示例代碼，文中通過示例介紹的很詳細，相信會對大家學習使用Angularjs具有一定的參考借鑒價值，有需要的朋友們可以一起來看看。2016-10-10