AngularJS中ng-repeat渲染完成事件和中间变量的引用
来源:互联网 发布:淘宝帐号三星 编辑:程序博客网 时间:2024/06/05 21:53
ng-repeat渲染完成事件
因为在用AngularJS期间, 经常用到ng-repeat, 而有时需要在其渲染完成时操作已经渲染的对象, 所以特在此记录一下添加渲染事件的方法, 以方便以后的使用;
代码如下
myApp.directive('onRepeatFinishedRender', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { //这里element, 就是ng-repeat渲染的最后一个元素 scope.$emit('ngRepeatFinished', element); }); } } };});
这其实是一个指令, 像使用一般指令一样使用就行了, 因为这里设置restrict为"A", 所以只能作为属性插入, 另外, 向回调函数传入element元素, 是为了方便区分多个使用此指令的元素, 比如有两个地方使用, 代码如下
<ul repeat-id="r1"> <li ng-repeat="p in persons track by $index" on-repeat-finished-render>{{p}}</li></ul><ul repeat-id="r2"> <li ng-repeat="a in animates track by $index" on-repeat-finished-render>{{a}}</li></ul><script> myApp.controller('userCtrl', function ($scope) { $scope.$on("ngRepeatFinished", function (repeatFinishedEvent, element){ var repeatId = element.parent().attr("repeat-id"); switch (repeatId){ case "r1": //repeat-id为r1的ul, repeat渲染完成 break; case "r2": //repeat-id为r2的ul, repeat渲染完成 break; } }) });</script>
中间变量的引用
另外还有一个要用到的, 就是在用filter等的时候, 有时需要用一个中间变量引用filter后的数组, 方便在html中使用, 比如, 我需要在将persons中的数据, 按照'sort'属性排列, 并且需要在repeat元素内需要访问排序后的数组, 可以这么做
<ul> <li ng-repeat="p in ps=(persons|orderBy:'sort') track by $index" ng-click="upOne(ps, index, $first)">{{p.name}}</li></ul><script> myApp.controller('userCtrl', function ($scope) { //这里传过来就是排序后的数组 //此函数的作用就是, 点击元素后, 将当前点击的元素和其上面的元素交换位置 $scope.upOne = function (arr, index, first){ if(!first){ var tmp = arr[index].sort; arr[index].sort = arr[index-1].sort; arr[index-1].sort = tmp; } } });</script>
综合实例
下面是一个完整的例子点击下载, 可以通过点击右侧按钮, 进行上移或下移进行排序, 大家可以测试一下
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <style> table{width:600px; margin: auto; border: none; border-padding:0; border-spacing: 0;} table td{text-align: center;} table td .button{cursor: pointer; color: #571d00; font-weight: bold;} table tr{height: 2.5em; vertical-align: middle;} table tbody tr:nth-child(2n+1){background-color: #f0f0f0;} table tbody tr:nth-child(2n){background-color: #f0e0ff;} </style> </head> <body ng-app="myApp" ng-controller="userCtrl"> <table> <thead> <tr> <th>索引</th><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th> </tr> </thead> <tbody repeat-id="r0"> <tr ng-repeat="(si,stu) in students=(persons|orderBy:'sort') track by $index" on-repeat-finished-render> <td>{{si+1}}</td> <td>{{stu.id}}</td> <td>{{stu.name}}</td> <td>{{stu.gender}}</td> <td>{{stu.age}}</td> <td> <span class="button" ng-click="changeSort(students, si, -1, 'sort')" ng-if="!$first">上移</span> <span class="split" ng-if="!$first&&!$last"></span> <span class="button" ng-click="changeSort(students, si, 1, 'sort')" ng-if="!$last">下移</span> </td> </tr> </tbody> </table> <script> var myApp = angular.module('myApp', []); myApp.directive('onRepeatFinishedRender', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished', element); }); } } }; }); myApp.controller('userCtrl', function ($scope, $http) { $scope.persons = [{ id: "161112001", sort: 0, name: "赵子龙", gender: "男", age: "18" }, { id: "161112002", sort: 2, name: "吕布", gender: "男", age: "18" }, { id: "161112003", sort: 1, name: "貂蝉", gender: "女", age: "18" }, { id: "161112004", sort: 3, name: "孙尚香", gender: "女", age: "18" }]; $scope.changeSort = function (arr, index, up, attr) { var temp; temp = arr[index].sort; arr[index][attr] = arr[index + up][attr]; arr[index + up][attr] = temp; return false; }; $scope.$on("ngRepeatFinished", function (repeatFinishedEvent, element){ console.log(element.parent().attr("repeat-id")); }) }) </script> </body></html>
文/jicemoon(简书作者)
原文链接:http://www.jianshu.com/p/4ead962e9dac
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
原文链接:http://www.jianshu.com/p/4ead962e9dac
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
源引:http://www.jianshu.com/p/4ead962e9dac
0 0
- AngularJS中ng-repeat渲染完成事件和中间变量的引用
- angularJs监听ng-repeat渲染完成
- AngularJS中的ng-repeat、ng-repeat-start和ng-repeat-end的用法区别详解
- AngularJS中使用ng-repeat的index
- AngularJS中ng-repeat对象的问题
- angularjs中使用ng-repeat渲染最后一个li的时候设置不同样式
- 如何知道ng-repeat循环的dom已经渲染完成
- Angularjs中select 的ng-repeat 和 ng-options 用法和获取选取值
- Angularjs中select 的ng-repeat 和 ng-options 用法和获取选取值
- angularjs的作用域(ng-repeat 和 ng-controller)
- angularJs中ng-repeat实例
- angular指令监听ng-repeat渲染完成
- AngularJS ng-repeat的使用
- 关于AngularJs的ng-repeat
- ng-repeat中DOM的重新渲染机制
- angularjs中使用ng-repeat需要注意的东西
- 解决AngularJS中ng-repeat不更新视图的问题
- AngularJS中 ng-repeat 排序后的 $index变化
- 寒炽-----AlarmManager为定时而生的绝杀技能
- linux下caffe编译以及python环境配置手记
- 多线程中的join()
- 基于Linux的WebSphere性能调优与故障诊断
- 几种典型的界面交互框架及优缺点
- AngularJS中ng-repeat渲染完成事件和中间变量的引用
- 数字图像处理(3)---亮度与对比度
- 珍爱生活~
- 整数划分
- Linux下查看文件和文件夹大小
- javaEE开发模式的演变
- 【Android】Android布局中实现圆角边框
- spring中bean,factorybean与beanfactory
- sed: sed command a expects followed by text