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的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php简单实现MVC
2015/02/05 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python字符串替换的2种方法
2014/11/30 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
详解Python import方法引入模块的实例
2017/08/02 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
百度软件工程师职位
2013/02/14 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
女儿十岁生日答谢词
2014/01/27 职场文书
个人授权委托书范本
2014/04/03 职场文书
教师求职自荐书
2014/06/14 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python