Question

有以下代码：

tr ng-repeat="order in orders | filter: { restaurant: { id: currentRestaurant.id } } | orderBy:'-id'"

这段代码运行良好，并且正确地按restaurant.id过滤订单。但是我需要在某些情况下禁用此过滤器以显示所有订单。我的控制器代码：

  $scope.setCurrentRestaurant = (restaurant) ->
    $scope.currentRestaurant = restaurant

我不知道如何以编程方式或使用filter指令禁用过滤。提前致谢。

Answer 1

如果过滤器参数为undefined，则不会过滤。如果filter参数是过滤表达式，则它将根据该过滤器进行过滤。

所以，你可以引入一个像这样的过滤表达式：

"filter: (enableFilter || undefined) && {restaurant:{id:currentRestaurant.id}}"

plunker

Answer 2

我认为Angular并不包含原生功能。

但您可以为此案例创建自定义解决方案。

例如，您可以在要禁用过滤器时广播事件。可以从任何地方（服务，指令，控制器）广播此事件。为简单起见，我在这里从控制器广播它。

我也在控制器中创建了filterByRestaurant。

查看：

<div ng-controller="MyCtrl">
    <div ng-repeat="order in orders | filter:filterByRestaurant">
        {{order.name}}
    </div>
    <button ng-if="enableFilter" ng-click="disableOrEnableFilter()">Disable filter</button>
    <button ng-if="!enableFilter" ng-click="disableOrEnableFilter()">Enable filter</button>
</div>

控制器：

function MyCtrl($scope, $rootScope) {
    $scope.enableFilter = true;
    $scope.currentRestaurant = {id: 2, name: "Rest2"};

    $scope.orders = [
        {id:1, restId: 1, name: "order from Rest1"},
        {id:2, restId: 2, name: "order from Rest2"},
        {id:3, restId: 3, name: "order from Rest3"}
    ];

    $scope.filterByRestaurant = function(order) {
        return $scope.currentRestaurant.id == order.restId || !$scope.enableFilter;
    };

    $scope.$on('filter:disable', function() {
        $scope.enableFilter = !$scope.enableFilter;
    });

    $scope.disableOrEnableFilter = function(){
        $rootScope.$broadcast("filter:disable");
    };
}

这是 JSFiddle 的例子。

希望它会有所帮助。

在AngularJS中禁用嵌套过滤器

2 个答案: