如何添加在NG-重複一個多選複選框過濾器？

我的應用程序是使用自舉3和AngularJS。如何添加在NG-重複一個多選複選框過濾器？

我想添加一個多選過濾器，讓我可以只查看所選項目我選擇了在NG-重複。例如，這裏是我的提取一小JSON數據樣本：

[ 
    { 
     "MarketName": "Farm1", 
     "Bakedgoods" :"N", 
     "Cheese":"Y", 
     "Eggs":"N" 
    }, 
    { 
     "MarketName": "Farm2", 
     "Bakedgoods" :"N", 
     "Cheese":"Y", 
     "Eggs":"N" 
    }, 
    { 
     "MarketName": "Farm3", 
     "Bakedgoods" :"Y", 
     "Cheese":"Y", 
     "Eggs":"N" 
    } 
]

如果我檢查烘焙食品，我只看到FARM3顯示在NG-重複。

如果我檢查的奶酪，我會看到Farm1，的farm2和FARM3顯示在NG-重複。

如果我檢查了烘焙食品和奶酪，我只會在ng-repeat上看到Farm3。

來源

2014-02-21 user3314402

我相信這是你所需要的： http://plnkr.co/edit/F5K6BkJvGny2fuLLuPCm?p=preview

來源

2014-02-21 07:40:52 Goodnickoff

只需使用非布爾值修改過濾器工作，但使用字符串。我認爲這並不困難。 – Goodnickoff

這是市場對象中字符串值的示例，如代碼中所示： http://plnkr.co/edit/zVbAfaTKxmQUqVhihKQu?p=preview – Goodnickoff

你需要一個searchkey與你的對象值來定義。

這樣的：

<input type="checkbox" ng-model="SearchKey.Bakedgoods" ng-true-value="Y" ng-false-value="N"/> 
<input type="checkbox" ng-model="SearchKey.Cheese" ng-true-value="Y" ng-false-value="N"/> 

<div ng-repeat="farm in farms | filter:SearchKey"> 
    {{farm.MarketName}} 
</div>

http://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

來源

2014-02-21 07:02:07

非常感謝你對你的球員的幫助。我將使用康斯坦丁克拉斯的方法，因爲它非常簡單！ – user3314402

在初始化時，這種方法有錯誤的行爲。在所有可見元素的開始處，但在選擇和取消選擇複選框後，不顯示任何元素。 – Goodnickoff

Oledje是對的。如果未選中複選框，則必須將ng-false-value =「」設置爲顯示所有元素 –

我想你需要的東西是這樣的：

小提琴：http://jsfiddle.net/mwrLc/70/

代碼：

var myModule = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.trueFalse = [ 
    { 
     "Eggs":"N" 
    }, 
    { 
     "Eggs":"Y" 
    } 
    ]; 

    $scope.trueFalseForBakedGoods = [ 
    { 
     "Bakedgoods":"N" 
    }, 
    { 
     "Bakedgoods":"Y" 
    } 
    ]; 

    $scope.list = [ 
    { 
     "MarketName": "Farm1", 
     "Bakedgoods" :"N", 
     "Cheese":"Y", 
     "Eggs":"N" 
    }, 
    { 
     "MarketName": "Farm2", 
     "Bakedgoods" :"N", 
     "Cheese":"Y", 
     "Eggs":"N" 
    }, 
    { 
     "MarketName": "Farm3", 
     "Bakedgoods" :"Y", 
     "Cheese":"Y", 
     "Eggs":"N" 
    } 
    ]; 

    $scope.$watch('searchBakedGoods', function() { 
     $scope.searchEggs = null; 
    });

}

來源

2014-02-21 07:05:03 V31

使用範圍函數來在ngRepeat作爲數據源。範圍函數將檢查綁定到複選框的範圍變量並過濾掉一些項目。

來源

2014-02-21 07:18:50

如何添加在NG-重複一個多選複選框過濾器？

回答

相關問題