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

debugcn 发表于 Dev

大卫·埃伦伯格

我之前收到的答案有一个后续问题。

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

我第一次提问时没有意识到的后续问题是，一个产品的多种类型如何。小提琴：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 }
}
}

迈克·费尔特曼

我在这里发布了一个更新代码笔：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
    } 
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。