当前位置: 首页 > 编程笔记 >

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

胡飞鹏
2023-03-14
本文向大家介绍angularjs中判断ng-repeat是否迭代完的实例,包括了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是否迭代完的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Angularjs中ng-repeat的简单实例,包括了Angularjs中ng-repeat的简单实例的使用技巧和注意事项,需要的朋友参考一下 Angularjs中ng-repeat的简单实例 第一个例子:使用ng-repeat最简单的例子 第二个例子:添加过滤条件 以上就是AngularJs 中ng-repent的使用实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮

  • 本文向大家介绍Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍,包括了Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍的使用技巧和注意事项,需要的朋友参考一下 ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式。 例如: ind

  • 给定以下对象: 是否可以使用ng repeat一次迭代所有值? 我的动机是:1。我在<代码>中使用ng-repeat 有什么想法吗? 谢谢!

  • 本文向大家介绍python判断一个对象是否可迭代的例子,包括了python判断一个对象是否可迭代的例子的使用技巧和注意事项,需要的朋友参考一下 如何判断一个对象是可迭代对象? 方法是通过collections模块的Iterable类型判断: 以上这篇python判断一个对象是否可迭代的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 问题内容: 嗨,我有一个简单的ng-repeat-start和end用例,并且工作正常,当我想添加一个内部ng-repeat时出现了问题。这是我的代码 内部ng-repeat到td元素中不起作用,在检查html源代码时看到ngRepeat注​​释,但未创建td元素。 我的丑陋的解决方法(假设我知道该向量的大小)是: 问题答案: 从那时起,我不确定是否使用角度1.1.6,并且在1.1.5或1.0.7

  • 问题内容: 在遍历数据后,我遇到一些有关DOM操作的问题。 我们有一个与数据绑定并且可以正常工作的jQuery滑块插件,但是当使用时,我们必须将其初始化包装起来以使其起作用—现在甚至不起作用。 我认为使用是不可靠的,这将导致错误的修复。在jQuery中,我可以使用-这很可靠,但是使用似乎也不起作用。 调用了Slider指令,但由于没有将图像加载到DOM中而无法获得滑块中图像的高度-导致滑块的计算高