AngularJS最终用户过滤多个值 [英] AngularJS End User Filter multiple values

问题描述

我正在尝试创建一个类似商店的网站，其中有针对产品的过滤器选项.我需要过滤器能够选择多个选项，并显示包含选择的所有项目.例如，选中食品复选框，然后为家具复选框，显示所有类型的食品和家具产品.如果未选择任何一项，则显示所有产品类型.

I am trying to create a shop like site where there is a filter option for products. I need the filter to be able to have more than one option selected, and show all the items that contain the selections. Example, checkbox for food is selected, and for furniture, show all products of type food and furniture. If none of these are selected, then show all product types.

我有一个一半工作的JSFiddle.它将过滤一个复选框，但是一旦选中第二个复选框，则不会显示任何结果. http://jsfiddle.net/ellenburgweb/om58sdbd/8/

I have a JSFiddle that is half working. It will filter down a checkbox, but as soon as a second one is selected, it shows no results. http://jsfiddle.net/ellenburgweb/om58sdbd/8/

<div ng-app ng-controller="Main">
<input type='checkbox' ng-model='filterFood' ng-true-value="Food" ng-false-value="" />Food
<br />
<input type='checkbox' ng-model='filterFurniture' ng-true-value="Furniture" ng-false-value="" />Furniture
<br />
<input type='checkbox' ng-model='filterFences' ng-true-value="Fences" ng-false-value="" />Fences
<br />
    <hr />
<div ng-repeat="product in products | filter:search | filter:filterFood | filter:filterFurniture | filter:filterFences">
{{product.name}} | {{product.type}}</div>

</div>
<script>
        function Main($scope){
            $scope.products = [{name: 'Product One', type: 'Food'},
                    {name: 'Product Two', type: 'Furniture'},
                    {name: 'Product Three', type: 'Fences'},
                    {name: 'Product Four', type: 'Food'},
                    {name: 'Product Five', type: 'Furniture'},
                    {name: 'Product Six', type: 'Fences'}];
        }  
</script>

我看到了其他类似的问题，对它们的回答很像这样:

I have seen other similar questions, and the answers to them are much like this one: How to filter multiple values (OR operation) in angularJS with checkbox

该方法对我不起作用.我需要首先展示所有产品，并过滤掉未选中的内容.

That method will not work for me. I need all the products to be showing to begin with, and filter out what is not selected.

推荐答案

在这里分叉的小提琴: http://jsfiddle.net/85dobcum/

Forked fiddle here: http://jsfiddle.net/85dobcum/

这应该为您做到:

<div ng-app ng-controller="Main">
    <input type='checkbox' ng-model='Food' ng-true-value="Food" ng-false-value="" />Food
    <br />
    <input type='checkbox' ng-model='Furniture' ng-true-value="Furniture" ng-false-value="" />Furniture
    <br />
    <input type='checkbox' ng-model='Fences' ng-true-value="Fences" ng-false-value="" />Fences
    <br />
    <hr />
    <div ng-repeat="product in products | filter:search | filter: productType">
    {{product.name}} | {{product.type}}
    </div>
</div>

function Main($scope){
    $scope.products = [{name: 'Product One', type: 'Food'},
                    {name: 'Product Two', type: 'Furniture'},
                    {name: 'Product Three', type: 'Fences'},
                    {name: 'Product Four', type: 'Food'},
                    {name: 'Product Five', type: 'Furniture'},
                    {name: 'Product Six', type: 'Fences'}];

    $scope.productType = function(product)  {
         var filters = []
         filters.push($scope.Food)
         filters.push($scope.Furniture)
         filters.push($scope.Fences)
         if (filters.toString().length <=4) {return true} 
         else {return filters.indexOf(product.type)>-1 }
    }
}  

这篇关于AngularJS最终用户过滤多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！