AngularJs:使用ng-repeat搜索两个不同的控制器

时间:2015-09-21 05:09:42

标签: javascript angularjs

我有一个使用两个表的角度应用程序。顶层表应该搜索两个表的数据,但是,它们使用两个不同的控制器。如何使用简单的服务或工厂获得顶级表格?

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>

1 个答案:

答案 0 :(得分:0)

您可以将服务直接包含在searchQuery中

Demo

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>