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 密码强弱度检测万能插件
Feb 25 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
javascript 闭包
Sep 15 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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
桌面中心(四)数据显示
2006/10/09 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python安装selenium包详细过程
2019/07/23 Python
Python 可视化神器Plotly详解
2020/12/26 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
配件采购员岗位职责
2013/12/03 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
《学会待客》教学反思
2014/02/22 职场文书
腾讯广告词
2014/03/19 职场文书
好的促销活动方案
2014/08/21 职场文书
普通话演讲稿
2014/09/03 职场文书
趣味运动会赞词
2015/07/22 职场文书
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android