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


Posted in Javascript onSeptember 12, 2018

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是否迭代完的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
tween.js缓动补间动画算法示例
Feb 13 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 #Javascript
详解JavaScript中操作符和表达式
Sep 12 #Javascript
JS 数组随机洗牌的实例代码
Sep 12 #Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 #Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 #Javascript
Vue弹出菜单功能的实现代码
Sep 12 #Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 #Javascript
You might like
codeigniter框架批量插入数据
2014/01/09 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python BS4库的安装与使用详解
2018/08/08 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
师德师风自查总结
2014/10/14 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
高中家长意见怎么写
2015/06/03 职场文书