快捷導(dǎo)航

angularjs中判斷ng-repeat是否迭代完的實(shí)例

更新時(shí)間：2018年09月12日 14:31:09 作者：梁毅

今天小編就為大家分享一篇angularjs中判斷ng-repeat是否迭代完的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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)文章

Angular ui-roter 和AngularJS 通過(guò) ocLazyLoad 實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴(lài)
這篇文章主要介紹了Angular ui-roter 和AngularJS 通過(guò) ocLazyLoad 實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴(lài),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
Angular ng-repeat指令實(shí)例以及擴(kuò)展部分
這篇文章主要為大家詳細(xì)介紹了Angular ng-repeat指令實(shí)例以及擴(kuò)展部分，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Angular父組件調(diào)用子組件的方法
組件是一種特殊的指令，使用更簡(jiǎn)單的配置項(xiàng)來(lái)構(gòu)建基于組件的應(yīng)用程序架構(gòu).這篇文章主要介紹了Angular組件——父組件調(diào)用子組件方法,需要的朋友可以參考下
2018-04-04
AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
AngularJS 面試題集錦
本文主要介紹AngularJS的面試題資料整理，這里整理了相關(guān)面試題的資料，幫助大家學(xué)習(xí)理解AngularJS的知識(shí)，有興趣的小伙伴可以參考下
2016-09-09
angular.js之路由的選擇方法
下面小編就為大家?guī)?lái)一篇angular.js之路由的選擇方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
詳細(xì)談?wù)凙ngularJS的子級(jí)作用域問(wèn)題
大家在使用angularjs的時(shí)候，很容易忽略AngularJS自帶指令的作用域問(wèn)題，有一些指令會(huì)產(chǎn)生獨(dú)立的自己作用域，造成子級(jí)無(wú)法與父級(jí)作用域雙向綁定的問(wèn)題。下面我們來(lái)看看這些問(wèn)題，有需要的可以參考借鑒。
2016-09-09
AngularJS表單詳解及示例代碼
本文主要介紹AngularJS表單的知識(shí)，這里整理了表單的基礎(chǔ)知識(shí)和簡(jiǎn)單的示例代碼，有需要的小伙伴可以參考下
2016-08-08
angular4 共享服務(wù)在多個(gè)組件中數(shù)據(jù)通信的示例
本篇文章主要介紹了angular4 共享服務(wù)在多個(gè)組件中數(shù)據(jù)通信的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框的詳細(xì)過(guò)程及示例代碼，文中通過(guò)示例介紹的很詳細(xì)，相信會(huì)對(duì)大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起來(lái)看看。
2016-10-10