angularjs中判断ng-repeat是否迭代完的实例

鸟菜小端前 2018-09-12

angular中的ng-repeat指令会自动迭代数组然后你就可以将这些迭代的数据在页面逐条显示。但是怎样才知道数据迭代完了，其实还是有方法的，今天就介绍一种方法来判断ng-repeat是否已经迭代完。众所周知ng-repeat会为每一个repeat的对象创建一个控制器，我们就利用这个来判断。

首先我们要定义一个数组

$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这个数组在html页面中使用ng-repeat指令，并为他们创建控制器。

<body ng-controller="app1Controller">
<content>
 
  <!--为每一个repeat的对象创建一个itemRepeatCtrl控制器-->
 <div class="item" ng-controller="itemReaptCtrl" ng-repeat="li in testArrray track by li.id">
  {{li.value}}

 </div>


</content>
</body>

接着就是为他们创建子控制器

.controller('itemReaptCtrl', ['$scope', function ($scope) {
 $scope.$watch($scope.$last, function () {
  console.log("执行了一次!");
  if($scope.$last){ //$scope.$last是来判断是否是最后一个ng-repeat对象， 如果是则$scope.$last的值为true ,反之则为false
   $scope.$emit('ngRepeatFinished'); // 由于是向父控制器中发布广播，所有用$emit
  }
 })
}])

然后在父控制器中接受广播

$scope.$on('ngRepeatFinished', function (data) { //接收广播，一旦repeat结束就会执行
 console.log("恭喜你，repeat结束了！");
});

看控制器中有打印，证明此方法有效

angularjs中判断ng-repeat是否迭代完的实例

有时候需要在ng-repeat 指令repeat结束之后进行一些操作时便可以使用这种方法。

鸟菜小端前

鸟菜小端前

相关推荐

AngularJs中ng-repeat指令的默认animate动画

但是没想出来时为什么，开始以为数据或数组操作出问题，搞了很长时间没搞明白。结果一步一步删代码发现问题出在引入的animate包身上。原来ng-repeat指令在引入animate的情况下自动调用ng-enter,ng-leave等class。$animat

CrazyDogWang / 0评论 2017-02-14

AngularJs 基础教程​ —— Select(选择框)

本文为H5EDU机构官方HTML5培训教程，主要介绍：AngularJs基础教程——Select(选择框). AngularJS可以使用数组或对象创建一个下拉列表选项。ng-repeat指令是通过数组来循环HTML代码来创建下拉列表，但ng-options

zbwroom / 0评论 2016-09-23

angularjs ng-repeat指令

对于遍历一个数组或对象已经不陌生了，而在angularjs中也是有遍历的方法，即ng-repeat指令。<ul><li ng-repeat =' number in [1,2,3]'>{{number}}</li><

youyouzouzou / 0评论 2015-11-30

AngularJS学习（三）模板

JSP也算个模板吧，不过是服务端的。-- ng-controller指令指定了一个控制器,见03-1.js中的定义,这个控制器的作用范围(域)即在这个div内 -->. -- 这里phones定义在PhoneListCtrl内,即$scope.pho

princejingyun / 0评论 2013-01-30

对AngularJS进行性能调优的7个建议

AnglarJS作为一款优秀的Web框架，可大大简化前端开发的负担。近日Sebastian Frstl在一篇博文《AngularJS Performance Tuning for Long Lists》中表示AnglarJS在处理包含复杂数据结构的大型列表

Oranq / 0评论 2013-09-24

AngularJS监听ng-repeat渲染完成的两种方法

本文实例讲述了AngularJS监听ng-repeat渲染完成的两种方法。分享给大家供大家参考，具体如下：。<li ng-repeat="src in imageHotList track by $index" ng-click=

闲听风月 / 0评论 2018-01-16

angular指令笔记ng-options的使用方法

在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框

forthemyth / 0评论 2017-09-18

AngularJS ng-repeat指令及Ajax的应用实例分析

本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考，具体如下：。ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。<element ng-repeat="exp

codergirl / 0评论 2017-07-06

AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题

本文实例讲述了AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题。分享给大家供大家参考，具体如下：。Error: [ngRepeat:dupes] Duplicates in a repeater are not

Inuyasha / 0评论 2017-01-21

AngularJS的ng-repeat指令与scope继承关系实例详解

本文实例分析了AngularJS的ng-repeat指令与scope继承关系。分享给大家供大家参考，具体如下：。<input type="button" ng-repeat="button in buttons"

forthemyth / 0评论 2017-01-21

AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法

今天用angular写table的时候，遇到了一个问题。在ng-repeat中，含有动态的html，而这些html中含有自定义指令。因为希望实现一个能够复用的table，所以定义了一个指令myStandTable，指令代码大概如下：。});以上，完成了表格

鸟菜小端前 / 0评论 2017-01-19

Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作，angular本身并没有提供监听ng-repeat渲染完成的指令，所以需要自己动手写。有经验的同学都应该知道，在ng

thesameguo / 0评论 2016-12-31

Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

ng-repeat-start与ng-repeat-end时AngularJS扩展的，使用这两个指令可以灵活控制遍历形式。</html>以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流

itseebin / 0评论 2019-04-29

AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】

本文实例讲述了AngularJS使用ng-repeat和ng-if实现数据的删选显示效果。分享给大家供大家参考，具体如下：。我们只需要在ng-repeat后面简单的加上ng-if="member.partment=='产品部即可'".

DataCastle / 0评论 2016-12-13

AngularJS深入探讨scope，继承结构，事件系统和生命周期

本文实例讲述了AngularJS的scope，继承结构，事件系统和生命周期。分享给大家供大家参考，具体如下：。类 Scope 拥有可以控制 scope 生命周期的方法，提供事件传播的能力，并支持模板渲染。ng-controller指令就是 可以创建作用域

鸟菜小端前 / 0评论 2016-11-02

AngularJS 与Bootstrap实现表格分页实例代码

AngularJS 从开始发布到现在使用的开发的者越来越多，也表明大多数做前端的朋友在往这边转，毕竟是Google 公司出品的产品啊，所以最近自己也在学习这部分知识。最近一直学习Angular.js，在学习过程中也练习了很多的Demo，这里先贴一下表格+分

codergirl / 0评论 2019-04-29

AngularJS使用自定义指令替代ng-repeat的方法

大家都知道对于处理小数量，ng-repeat是非常有用的，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。特别是数据大多都是静态的或已预存储好的，这个时候应避免使用ng-repeat指令。Angular中的表达式都会创建$watch 的Sco

鸟菜小端前 / 0评论 2019-04-26

AngularJS使用ng-repeat指令实现下拉框

AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素，但是使用不当也会有性能问题。下面给大家分享在项目中使用ng-repeat指令实现下拉框。$scope.trees = ["松树","樟树&

Inuyasha / 0评论 2016-08-23

AngularJS入门（用ng-repeat指令实现循环输出

循环输出列表很多项目在web服务端做，前端做好模版后后端写jsp代码，双方需要紧密合作，分清责任。有些项目由后端提供restful方法，前端用ajax调用自己循环，这种一般是大把的jquery拼字符串，太不直观，有人搞出了js模板，也没好到哪里去。$ind

雅特岚蒂斯 / 0评论 2019-04-25

Angular.js与Bootstrap相结合实现表格分页代码

先给大家简单介绍angular.js和bootstrap基本概念。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。Bootstrap，来自 Twit

hxmilyy / 0评论 2019-04-25

使用angularjs创建简单表格

初步接手人生的第一个项目，需要用angularjs制作表格和实现各种功能，因此遇到了各种问题和以前不熟悉的知识点，在此记录下来，以供大家学习交流，解决方式可能并不完善或符合规范，如果大家有更好的方式欢迎指出，由于这个表格功能的制作是一点点添加上去的，因此我

hxmilyy / 0评论 2019-04-25

整理AngularJS中的一些常用指令

AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令：。ng-repeat - 该指令将重复集合中的每个项目的HTML元素。ng-app 指令启动一个AngularJS应用。它会自动初始化或启动加载包含Angula

老卫的技术站 / 0评论 2019-04-21

AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html

今天用angular写table的时候，遇到了一个问题。在ng-repeat中，含有动态的html，而这些html中含有自定义指令。因为希望实现一个能够复用的table，所以定义了一个指令myStandTable，指令代码大概如下：。14

编程爱好者联盟 / 0评论 2017-01-19