在angularjs中切換過濾結果

Question

如何在第一次單擊時過濾，然后在第二次單擊時重置過濾器？ 我想先顯示具有圖像的項目，然后在第二次單擊時重置過濾器。 請檢查[小提琴] [1] [1]： http : //jsfiddle.net/6L7xn/9/謝謝

  <button class="btn btn-primary" ng-click="myFilter = {'largeImage': {'hasImage': 'Yes'}}">Images</button

Answer 1

我已經分叉了您的jsfiddle： http : //jsfiddle.net/jkrielaars/n5q9xeej/2/

我必須更改幾件事：

• 您原來的過濾器正在檢查hasimage：是（使用大寫字母）。 在您的對象中，全是小寫
• 為了啟用“深度過濾”，您需要將:true作為第三個參數傳遞給過濾器
• 我制作了一個切換函數，用於在“ {}”和您要過濾的對象之間切換myFilter對象。

控制器：

    $scope.myFilter = {};
    $scope.toggleFilter = function(){
        if(angular.equals({}, $scope.myFilter)){
            $scope.myFilter = {'largeImage': {'hasImage': 'yes'}};
        }else{
            $scope.myFilter = {};
        }
    }

和視圖：

    <button class="btn btn-primary" ng-click="toggleFilter()">Images</button>

    <div class="item-sc" data-ng-repeat="d in things | filter:myFilter:true">

Answer 2

添加控件的簡單功能足以在控制器中設置作用域變量，您可以通過ng-click進行調用。 然后將過濾器設置為等於scope變量中的值。 像這樣：

添加到控制器

$scope.myFilter = 'no' // or whatever you want to default to;
$scope.setMyFilter = function(){
    $scope.myFilter = $scope.myFilter === 'no' ? 'yes' : 'no';
};

HTML

<div ng-app="MyApp">
<div class="container" ng-controller="sentCtrl">
    <div class="row">
        <div><strong>Only show:</strong>&nbsp;
            <div class="btn-group btn-group-xs">
                <button class="btn btn-primary" ng-click="setMyFilter()">Images</button>
            </div>
        </div>
    </div>
    <div class="row content-sc">
        <div class="item-sc" data-ng-repeat="d in things | filter: {largeImage.hasImage: myFilter}">
             <h4>{{d.NAME}}<br/><small>ID: {{d.ID}}</small></h4>

        </div>
    </div>
</div>