Question

如何从其他控制器向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>

Answer 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;

    }]);

将过滤器应用于ng从不同的控制器重复

1 个答案: