AngularJS中ng-repeat渲染完成事件和中间变量的引用

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}}
          

            上移
            
            下移