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的parseInt 取整使用
May 09 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 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.ini中date.timezone设置分析
2011/07/29 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python学习思维导图(必看篇)
2017/06/26 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
基于python中__add__函数的用法
2019/11/25 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
军训自我鉴定
2013/12/14 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
运动会入场词100字
2014/02/06 职场文书
学习十八大标语
2014/10/09 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
关于的python五子棋的算法
2022/05/02 Python