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获取GridView选择的行内容
Apr 14 Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
原生JS实现拖拽功能
Dec 16 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
PHP4之真OO
2006/10/09 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python读写二进制文件的方法
2015/05/09 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
python 为什么说eval要慎用
2019/03/26 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
详解Python中的路径问题
2020/09/02 Python
利用Python优雅的登录校园网
2020/10/21 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
销售内勤岗位职责
2014/04/15 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
小学生优秀评语
2014/12/29 职场文书
审美与表现自我评价
2015/03/09 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python