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 相关文章推荐
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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验证码的制作思路和实现方法
2015/11/12 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
初学JavaScript第二章
2008/09/30 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
JS中offset和匀速动画详解
2018/02/06 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python下载指定页面上图片的方法
2016/05/12 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python如何使用腾讯云发送短信
2020/09/17 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
介绍一下grep命令的使用
2015/06/12 面试题
师范应届毕业生自荐信
2013/11/18 职场文书
会议室标语
2014/06/21 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书