javascript - NG-重复过滤后完成重火

标签 javascript angularjs angularjs-ng-repeat

我试图在每次 ng-repeat 完成时启动一个函数, 到目前为止我已经得到以下内容:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.friends = [{
    name: 'John',
    phone: '555-1276'
  }, {
    name: 'Mary',
    phone: '800-BIG-MARY'
  }, {
    name: 'Mike',
    phone: '555-4321'
  }, {
    name: 'Adam',
    phone: '555-5678'
  }, {
    name: 'Julie',
    phone: '555-8765'
  }, {
    name: 'Juliette',
    phone: '555-5678'
  }]

  $scope.test = function() {
    console.log('test');
  }
});

app.directive('onFinishRender', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      if (scope.$last === true) {
        scope.$evalAsync(attr.onFinishRender);
      }
    }
  }
});
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <label>Search:
    <input ng-model="searchText">
  </label>
  <table id="searchTextResults">
    <tr>
      <th>Name</th>
      <th>Phone</th>
    </tr>
    <tr ng-repeat="friend in friends | filter:searchText" on-finish-render="test()">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
    </tr>
  </table>
</body>

</html>

这会触发该函数一次,但是您如何修改它以使其在每次应用过滤器时都起作用?

Plunker version

最佳答案

如果我正确理解您的要求,您将在搜索输入框中使用 ng-change 指令。

使用这个:

<input ng-model="searchText" ng-change="test();">

关于javascript - NG-重复过滤后完成重火,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32475693/

相关文章:

javascript - 使用 angularjs 和 IFrame 进行页面滚动

javascript - 我可以实例化一个变量,但稍后再为 value 赋值吗?

javascript - AngularJS ng-重复过滤器: {visible: true} does not follow property change

javascript - 在 Angular js中使用推送功能

javascript - 如何使用 Flow 导出 Action 创建者返回值的类型?

javascript - JavaScript 中的 WebService 无法在 asp.net 上运行

javascript - 使用 Javascript 将链接转换为 iframe

javascript - 对 Angular 表达式执行正则表达式

javascript - ng-toggle,添加到数组,

javascript - 访问在 socket.io 中发出消息的套接字