AngularJS最终用户过滤多个值已修订

时间:2017-06-16 15:39:50

标签: angularjs

对我之前收到的答案有一个跟进问题。

第一个问题的答案,在这里:AngularJS End User Filter multiple values

我第一次问到的时候没有意识到的后续问题是一种产品的多种类型。 Fidde:http://jsfiddle.net/ellenburgweb/btpm13m4/2/

<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,Fence'},
                {name: 'Product Three', type: 'Fences'},
                {name: 'Product Four', type: 'Food,Furniture'},
                {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 }
}
}

1 个答案:

答案 0 :(得分:1)

我在这里发布了更新代码:http://jsfiddle.net/ezuq4soc/

productType函数现在看起来像这样:

 $scope.productType = function(product) {
    var filters = []
    filters.push($scope.Food)
    filters.push($scope.Furniture)
    filters.push($scope.Fences)
    if (filters.toString().length <= 3) {
      return true
    } else {
      var types = product.type.split(",")
      var match = false
      types.some(function(curType) {
        match = filters.indexOf(curType.trim()) > -1
        return match
      })
      return match
    } 
  }