在AngularJS中，一个控制器如何从另一个控制器获得正在过滤的数据

In AngularJS, how can one controller get data being filtered from another controller

本文关键字：控制器 另一个 数据 过滤 AngularJS 一个      更新时间：2023-09-26

说我们正在编程一个分页：

<div ng-controller="panelCtrl">
  <table>
    <tr ng-repeat="item in items | filter:query.name">{{item}}</tr>
  </table>
  <ul ng-controller="paginationCtrl">
    <li ng-repeat="n in range()">
  </ul>
</div>

在我的range函数中，我试图获得项目数量，并将其除以itemsPerpage，以获得页码。我想知道如何在过滤后获得项目数量。

提前感谢

您可以将过滤后的列表保存在变量中。

<div ng-controller="panelCtrl">
  <table>
    <tr ng-repeat="item in filtered = (items | filter:query.name")>{{item}}</tr>
  </table>
  <ul ng-controller="paginationCtrl">
    <li ng-repeat="n in range()">
  </ul>
</div>

现在您可以执行{{filtered.length}}来获取长度，或者将其用作range(filtered.length)的输入。

Filtered也可以是可验证的作用域，在这种情况下，它应该在paginationCtrl中可用。

您可以使用服务在控制器之间进行通信。请参阅下面的解决方案。

var app = angular.module('app', []);
app.factory('dataService', function($filter) {
  var data =
    {
      items: ["Apple", "Banna", "Potato", "Pear"],
      itemsFiltered: []
    }
  return {
    data: data
  };
});
app.controller('homeCtrl', function($scope, filterFilter, dataService) {
  $scope.data = dataService.data;
  $scope.$watch('filtered.length', function(value) {
    dataService.data.itemsFiltered = $scope.filtered;
  })
});
app.controller('paginationCtrl', function($scope, dataService) {
  $scope.data = dataService.data;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <input type="text" ng-model="query.name" />
    <table>
      <tr ng-repeat="item in filtered = (data.items | filter:query.name)">
        <td>{{item}}</td>
      </tr>
    </table>
    <hr/>
  </div>
  <div ng-controller="paginationCtrl">
    <p>Pagination Controller</p>
    <pre> Filtered Array Length: {{data.itemsFiltered.length}}</pre>
  </div>
</div>

相关文章：