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元素, 是为了方便区分多个使用此指令的元素, 比如有两个地方使用, 代码如下
- {{p}}
- {{a}}
中间变量的引用
另外还有一个要用到的, 就是在用filter等的时候, 有时需要用一个中间变量引用filter后的数组, 方便在html中使用, 比如, 我需要在将persons中的数据, 按照'sort'属性排列, 并且需要在repeat元素内需要访问排序后的数组, 可以这么做
- {{p.name}}
综合实例
下面是一个完整的例子点击下载, 可以通过点击右侧按钮, 进行上移或下移进行排序, 大家可以测试一下
索引 学号 姓名 性别 年龄 操作
{{si+1}}
{{stu.id}}
{{stu.name}}
{{stu.gender}}
{{stu.age}}