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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
jquery中this的使用说明
Sep 06 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python Socket编程详细介绍
2017/03/23 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
如何利用python生成MD5并去重
2020/12/07 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
Java模拟试题
2014/11/10 面试题
人力资源管理专业自荐书范文
2014/02/10 职场文书
2014年党务公开方案
2014/05/08 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
争先创优活动总结
2014/08/27 职场文书
党员年度个人总结
2015/02/14 职场文书
暑假打工感想
2015/08/07 职场文书
新学期开学寄语2016
2015/12/04 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
Consul在linux环境的集群部署
2022/04/08 Servers