在AngularJS中，一個控制器如何獲取從另一個控制器過濾的數據

Question

說我們正在編程一個分頁：

<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以獲得頁碼。 我想知道過濾后如何獲得項目數量。

提前致謝

Answer 1

您可以將過濾后的列表保存在變量中。

<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)輸入。

過濾的范圍也可以驗證，在這種情況下應該在paginationCtrl可用。

Answer 2

您可以使用服務在控制器之間進行通信。 請參閱以下解決方案之一，解決您的問題。

 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>