AngularJs：使用ng-repeat和兩個不同的控制器進行搜索

Question

我有一個使用兩個表的角度應用程序。 應該在最上面的表中搜索兩個表的數據，但是，它們使用的是兩個不同的控制器。 如何使用簡單的服務或工廠來獲得最高的餐桌呢？

div ng-controller="topCtrl">
     <tr ng-repeat="data in myData | filter:search">
          <td><input type="checkbox"/></td>
          <td>{{ data.number }}</td>
          <td>{{ data.street }}</td>
      </tr>
 </div>

 div ng-controller="botCtrl">
     <tr ng-repeat="data in myData2 | filter:search2">
          <td><input type="checkbox"/></td>
          <td>{{ data.number }}</td>
          <td>{{ data.street }}</td>
      </tr>
 </div>

Answer 1

您可以將服務直接包含在searchQuery中

演示版

angular.module('myApp').controller('topCtrl', function topCtrl($scope, searchService) {
    $scope.myData = ["A", "B"];
    $scope.searchService = searchService;
});

angular.module('myApp').controller('botCtrl', function botCtrl($scope, searchService) {
    $scope.myData2 = ["A", "B"];
    $scope.searchService = searchService;
});

---

<div ng-app="myApp">
    <div ng-controller="topCtrl">
        <input type="text" ng-model="searchService.search"/>
        <table>
            <tr ng-repeat="data in myData | filter:searchService.search">
                <td>{{ data }}</td>
            </tr>
        </table>
    </div>
    <hr/>
    <div ng-controller="botCtrl">
        <table>
            <tr ng-repeat="data in myData2 | filter:searchService.search">
                <td>{{ data }}</td>
            </tr>
        </table>
    </div>
</div>