在AngularJS中禁用嵌套過濾器

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的示例。

希望它會有所幫助。