angularjs中判断ng-repeat是否迭代完的实例

 更新时间:2018年09月12日 14:31:09   作者:梁毅  
今天小编就为大家分享一篇angularjs中判断ng-repeat是否迭代完的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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结束了!");
});

看控制器中有打印,证明此方法有效

有时候需要在ng-repeat 指令repeat结束之后进行一些操作时便可以使用这种方法。

以上这篇angularjs中判断ng-repeat是否迭代完的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Monaco Editor中的Keybinding机制

    详解Monaco Editor中的Keybinding机制

    这篇文章主要为大家介绍了详解Monaco Editor中的Keybinding机制详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Angular 2父子组件数据传递之局部变量获取子组件其他成员

    Angular 2父子组件数据传递之局部变量获取子组件其他成员

    这篇文章主要给大家介绍了关于Angular 2父子组件之间数据传递之局部变量获取子组件其他成员的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • angular分页指令操作

    angular分页指令操作

    这篇文章主要为大家详细介绍了angular分页指令操作的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 利用AngularJs实现京东首页轮播图效果

    利用AngularJs实现京东首页轮播图效果

    这篇文章给大家介绍了如何利用AngularJs实现京东首页轮播图的效果,本文通过示例代码详细介绍了实现过程,对大家学习AngularJS具有一定参考借鉴价值,有需要的朋友们可以参考借鉴。
    2016-09-09
  • AngularJS中的过滤器filter用法完全解析

    AngularJS中的过滤器filter用法完全解析

    这篇文章主要介绍了AngularJS中的过滤器filter用法,包括Angular中一些常用的自带的过滤器的列举以及自定义filter的方法,需要的朋友可以参考下
    2016-04-04
  • Angular4 中内置指令的基本用法

    Angular4 中内置指令的基本用法

    不得不说指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能。下面这篇文章主要给大家介绍了关于Angular4中内置指令的基本用法,文中通过示例代码介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-07-07
  • Angularjs过滤器实现动态搜索与排序功能示例

    Angularjs过滤器实现动态搜索与排序功能示例

    这篇文章主要介绍了Angularjs过滤器实现动态搜索与排序功能,涉及AngularJS过滤器相关搜索、查询、排序操作技巧,需要的朋友可以参考下
    2017-12-12
  • 使用Angular缓存父页面数据的方法

    使用Angular缓存父页面数据的方法

    这篇文章主要介绍了使用Angular缓存父页面数据的方法,需要的朋友可以参考下
    2017-01-01
  • 详解angular 中的自定义指令之详解API

    详解angular 中的自定义指令之详解API

    本篇文章主要介绍了angular 中的自定义指令之详解API,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Angular.JS内置服务$http对数据库的增删改使用教程

    Angular.JS内置服务$http对数据库的增删改使用教程

    我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象,下面这篇文章主要给大家介绍了关于Angular.JS内置服务$http对数据库的增删改等操作的相关资料,需要的朋友可以参考下。
    2017-05-05

最新评论