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 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
javascript实现前端成语点击验证
Jun 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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP数组实例详解
2016/06/26 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Django实现文件上传下载功能
2019/10/06 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
UNIX文件名称有什么规定
2013/03/25 面试题
红领巾心向党广播稿
2014/01/19 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
红头文件任命书范本
2014/06/05 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android