AngularJS中ng-repeat渲染完成事件和中間變數的引用

阿新 • • 發佈：2019-01-15

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元素, 是為了方便區分多個使用此指令的元素, 比如有兩個地方使用, 程式碼如下

<ul repeat-id="r1">
  <li ng-repeat="p in persons track by $index" 
 on-repeat-finished-render>{{p}}</li>
</ul>
<ul repeat-id="r2">
  <li ng-repeat="a in animates track by $index" on-repeat-finished-render>{{a}}</li>
</ul>
<script>
  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;
      }
    })
  });
</script>

中間變數的引用

另外還有一個要用到的, 就是在用filter等的時候, 有時需要用一箇中間變數引用filter後的陣列, 方便在html中使用, 比如, 我需要在將persons中的資料, 按照'sort'屬性排列, 並且需要在repeat元素內需要訪問排序後的陣列, 可以這麼做

<ul>
  <li ng-repeat="p in ps=(persons|orderBy:'sort') track by $index" ng-click="upOne(ps, index, $first)">{{p.name}}</li>
</ul>
<script>
  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;
      }
    }
  });
</script>

綜合例項

下面是一個完整的例子點選下載, 可以通過點選右側按鈕, 進行上移或下移進行排序, 大家可以測試一下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    <style>
      table{width:600px; margin: auto; border: none; border-padding:0; border-spacing: 0;}
      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;}
    </style>
  </head>
  <body ng-app="myApp" ng-controller="userCtrl">
    <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') track by $index" on-repeat-finished-render>
          <td>{{si+1}}</td>
          <td>{{stu.id}}</td>
          <td>{{stu.name}}</td>
          <td>{{stu.gender}}</td>
          <td>{{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>
    </table>
    <script>
      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"));
        })
      })
    </script>
  </body>
</html>

文／jicemoon（簡書作者）
原文連結：http://www.jianshu.com/p/4ead962e9dac
著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。

源引：http://www.jianshu.com/p/4ead962e9dac

AngularJS中ng-repeat渲染完成事件和中間變數的引用

ng-repeat渲染完成事件

中間變數的引用

綜合例項

AngularJS中ng-repeat渲染完成事件和中間變數的引用

AngularJS監聽ng-repeat渲染完成後事件

angularJs監聽ng-repeat渲染完成

利用angular指令監聽ng-repeat渲染完成後執行函式

AngularJS中ng-repeat使用心得

AngularJS中ng-include指令實現頭部和尾部的共用

解決AngularJS中ng-repeat不更新檢視的問題

Angularjs中ng-repeat與移動端滑動外掛iScroll的衝突

AngularJS中 ng-repeat 排序後的 $index變化

angularJs中ng-repeat遍歷動態生成的表單元素繫結ng-model無效的問題

利用angular指令監聽ng-repeat渲染完成後執行指令碼

關於AngularJS中ng-repeat問題（問卷遍歷問題）

AngularJS的ng-repeat迴圈中如何獲得被迴圈列表的索引值

angular監聽dom渲染完成，判斷ng-repeat迴圈完成

AngularJs 在ng-repeat中動態使用ng-model進行雙向資料繫結

angularjs ng-repeat單選框和下拉框的實現

Angularjs中ng-select和ng-options用法【select聯動資料】

angularjs（ng-repeat和filter）生成多級選單

AngularJS 中ng-model通過$watch動態取值

AngularJS 獲取ng-repeat的動態ng-model

AngularJS中ng-repeat渲染完成事件和中間變數的引用

ng-repeat渲染完成事件

中間變數的引用

綜合例項

相關推薦