0

如何ngRepeat从不同的控制器应用过滤器？

从Filters控制器我如何applyFilter()：

<div ng-controller="Filters">
    <span ng-click="applyFilter()"></span>
</div>

...items在Results控制器中

<div ng-controller="Results">
    <div ng-repeat="item in items">
        {{item.thing}}
    </div>
</div>
4

1 回答 1

1

您可以使用父控制器或服务。下面的第一个示例使用父控制器定义项目和过滤值以与两个子控制器共享。第二个示例演示了使用注入到两个控制器且不需要父控制器的服务。

父控制器示例： 我将为两者都有一个父控制器，并在该控制器中定义数据和过滤器值。这将允许每个子控制器轻松处理和操作过滤器：

演示：http ://plnkr.co/edit/yrtsX5SQsRiNSho6o9x8?p=preview

HTML：

<body ng-controller="MainCtrl">
  Hello {{name}}!

  <div ng-controller="Filters">
    <span ng-click="applyFilter()">Apply Filter</span>
  </div>

  <div ng-controller="Results">
    <div ng-repeat="item in items |  filter:filterFunc ">
    {{item}}
    </div>
  </div>

</body>

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.items = [1,2,3,4,5,6,7];
  $scope.filterVal = 0;

});

app.controller('Filters', function($scope) {
    $scope.applyFilter = function() {
           $scope.$parent.filterVal = 5;  
           $scope.$apply();
    }
});

app.controller('Results', function($scope) {
 $scope.filterFunc= function(item) {
    console.log(item);
     if (item>$scope.filterVal)
      return item;
    }

});

服务示例。 这是一个包含过滤器值和项目的服务的更新示例。 http://plnkr.co/edit/wZFKBMRv0SeEsXNqARe2?p=preview

app.controller('Filters', function($scope, Utils) {
    $scope.applyFilter = function() {
          Utils.setFilter(4);
    }
});



app.controller('Results', function($scope, Utils) {
  $scope.items = Utils.getItems();
 $scope.filterFunc= function(item) {
    console.log(item);
     if (item>Utils.getFilter())
      return item;
    }

});

angular.module('ServicesUtils', []).
   factory('Utils', [ function () {

      var items = [1,2,3,4,5,6,7];
      var filter = 0;

      var service = {
        getFilter:function() {
          return filter;
        },
        getItems:function() {
         return items;
        },
        setFilter:function(n) {
          filter = n;
        }
      };

     return service;

    }]);
于 2013-05-17T20:00:06.693 回答