AngularJS中ng-repeat渲染完成事件和中间变量的引
2019-01-24 本文已影响0人
壹只很拽的猫
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
链接：https://www.jianshu.com/p/4ead962e9dac
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
