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
作者：jicemoon
链接：https://www.jianshu.com/p/8d3269f78a1c
随时随地看视频
