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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
javascript制作2048游戏
Mar 30 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 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
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
网站上面有这种切换效果
2006/06/26 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
使用js 设置url参数
2013/07/08 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python中的ConfigParser模块使用详解
2015/05/04 Python
PyQT实现多窗口切换
2018/04/20 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python 弧度与角度互转实例
2020/04/15 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
如何写一个自定义标签
2012/12/28 面试题
业务经理的岗位职责
2013/11/16 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
小学五年级学生评语
2014/04/22 职场文书
夏季药店促销方案
2014/08/22 职场文书
元旦趣味活动方案
2014/08/22 职场文书
小学工作总结2015
2015/05/04 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers