AngularJS中ng-repeat渲染完成事件[2]
2016-06-09 本文已影响1528人
jicemoon
ng-repeat渲染完成事件
此方法与前篇所写不同的是, 此种写法, 每次repeat数组有更新变化(需要重新渲染)时, 都会触发此事件, 调用对应侦听, 但是, Angularjs1.3.0及其以上的版本不支持此种写法.
核心代码
原理是使用自定义一个过滤器, 具体代码如下:
myApp.filter('ngRepeatFinishEveryTime', function ($timeout) {
return function (data, eventName) {
var me = this;
var flagProperty = '__finishedRendering__';
if (!data) data = {};
if (!data[flagProperty]) {
Object.defineProperty(data, flagProperty, {
enumerable: false,
configurable: true,
writable: false,
value: {}
});
$timeout(function () {
delete data[flagProperty];
me.$emit(eventName ? eventName : "ngRepeatFinishEveryTime");
}, 0, false);
}
return data;
};
});
实例
下面是具体用法实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container { width: 600px; margin: auto; }
.container > div { padding: 15px; background-color: #6D6D6D; color: #ffffff; }
table { width: 100%; border: none; border-padding: 0; border-spacing: 0; }
table thead{background-color: #c9e4ec;}
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; }
table tfoot { background-color: #ffd9c2; }
</style>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.9/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<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')|ngRepeatFinishEveryTime:'studentsRepeatFinish' track by $index">
<td ng-bind="si+1"></td>
<td ng-bind="stu.id"></td>
<td ng-bind="stu.name"></td>
<td ng-bind="stu.gender"></td>
<td ng-bind="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>
<tfoot>
<tr>
<td colspan="6">总数量: <span ng-bind="persons.length"></span></td>
</tr>
</tfoot>
</table>
<div>
<p>
<lable>姓名: <input ng-model="newStu.name" type="text"/></lable>
</p>
<p>
<lable>性别: <input ng-model="newStu.gender" type="radio" name="gender" value="男"/>男 <input
ng-model="newStu.gender" type="radio" name="gender" value="女"/>女
</lable>
</p>
<p>
<lable>年龄: <input ng-model="newStu.age" type="number"/></lable>
</p>
<button ng-click="add(newStu)">添加</button>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.filter('ngRepeatFinishEveryTime', function ($timeout) {
return function (data, eventName) {
var me = this;
var flagProperty = '__finishedRendering__';
if (!data) data = {};
if (!data[flagProperty]) {
Object.defineProperty(data, flagProperty, {
enumerable: false,
configurable: true,
writable: false,
value: {}
});
$timeout(function () {
delete data[flagProperty];
me.$emit(eventName ? eventName : "ngRepeatFinishEveryTime");
}, 0, false);
}
return data;
};
});
myApp.controller('userCtrl', function ($scope) {
$scope.newStu = {
name: "jicemoon",
gender: "男",
age: 19
}
$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.add = function (obj) {
obj = JSON.parse(JSON.stringify(obj));
var lens = $scope.persons.length + 1;
obj.id = "161112" + ("000" + lens).substring(('' + lens).length);
obj.sort = lens - 1;
$scope.persons.push(obj);
}
$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("studentsRepeatFinish", function (repeatFinishedEvent) {
console.log("data update & repeat render complete");
})
})
</script>
</body>
</html>
完整实例, 请点击一下链接进行下载
链接: http://pan.baidu.com/s/1c7eRRg 密码: 34gp
