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 相关文章推荐
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
js实现本地时间同步功能
Aug 26 Javascript
浅谈Express异步进化史
Sep 09 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP中创建并处理图象
2006/10/09 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
vue-loader教程介绍
2017/06/14 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
详解Python import方法引入模块的实例
2017/08/02 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python制作抽奖程序代码详解
2021/01/15 Python
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
护理工作感言
2014/01/16 职场文书
法制宣传月活动方案
2014/05/11 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
大学生创业计划书
2014/08/14 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
离婚协议书的范本
2015/01/27 职场文书
布达拉宫的导游词
2015/02/02 职场文书
党员转正申请报告
2015/05/15 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers