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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
js实现页面图片消除效果
Mar 24 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP语法速查表
2007/01/02 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
javascript中的window.location.search方法简介
2013/09/02 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
详解vuex之store源码简单解析
2019/06/13 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
python私有属性和方法实例分析
2015/01/15 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python切图九宫格的实现方法
2019/10/10 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python使用Geany编辑器配置方法
2020/02/21 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python中time、datetime模块的使用
2020/12/14 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
软件测试笔试题
2012/10/25 面试题
自荐书模板
2013/12/19 职场文书
高一英语教学反思
2014/01/22 职场文书
元旦晚会策划方案
2014/02/18 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
会计的岗位职责
2014/03/15 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python