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'로 설정하기 때문에 속성으로만 삽입할 수 있다. 또한 리셋 함수에 엘리먼트 요소를 전달하는 것은 이 지령을 사용하는 여러 요소를 쉽게 구분하기 위해서이다. 예를 들어 두 군데에서 사용할 수 있다. 코드는 다음과 같다.

  
{{p}}


  
{{a}}


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

중간 변수의 인용

또 하나 사용할 것은 filter 등을 사용할 때 중간 변수로 filter 후의 그룹을 인용해야 하기 때문에 html에서 사용하기 편리하다. 예를 들어persons의 데이터를'sort'속성에 따라 배열해야 하고repeat 요소에서 정렬 후의 그룹에 접근해야 한다. 이렇게 할 수 있다.

  
{{p.name}}


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

종합 실례

다음은 완전한 예입니다. 다운로드를 누르면 오른쪽 단추를 누르면 위로 이동하거나 아래로 이동하여 정렬할 수 있습니다. 테스트를 해보세요.

  
    
    
    
  
  
    

      

        

          
 
 
 
 
 
 
        
      
      

        

          
{{si+1}}
          
{{stu.id}}
          
{{stu.name}}
          
{{stu.gender}}
          
{{stu.age}}
          

             
            
             
          
        
      
    
    
      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"));
        })
      })