在Angular中使用复选框过滤json文件

时间:2015-07-26 08:37:23

标签: json angularjs filter angularjs-filter

我正在尝试过滤我的JSON文件中的结果,以便用户可以点击女士或男士风格,但有些产品同时具有女士和男士风格,那么我怎样才能显示'两者的结果'没有三个勾选框?我知道我的JSON中不能有重复的名称,但是现在只是作为一个例子。任何帮助,将不胜感激。我把我的代码放在这里:

http://plnkr.co/edit/fXOZHqo48ntvsdJA875y?p=preview

<div ng-controller="myCtrl">
    <div ng-repeat="(prop, ignoredValue) in { 'category': true, 'cut': true }" ng-init="filter[prop]={}">
        <b>{{prop | capitalizeFirst}}:</b><br />
        <span class="quarter" ng-repeat="opt in getOptionsFor(prop)">
            <b><input type="checkbox" ng-model="filter[prop][opt]" />&nbsp;{{opt}}</b>
        </span>
        <hr />
    </div>
    <div ng-repeat="w in filtered=(products | filter:filterByProperties)">
        {{w.name}} ({{w.category}})
    </div>
    <hr />
    Number of results: {{filtered.length}}
</div>

1 个答案:

答案 0 :(得分:1)

您需要在json中进行一些更改。

  1. 只要cut有一个值,那么它就是string&amp;只要有多个值,您就可以维持array 比如"cut": "ladies""cut": "mens",&amp; "cut": ["ladies","mens"]
  2. 您需要在filterByProperties函数
  3. 中处理字符串和过滤器内容

    <强>标记

    <span ng-show="!isArray(opt)" class="quarter" ng-repeat="opt in getOptionsFor(prop)">
        <b><input type="checkbox" ng-model="filter[prop][opt]" />&nbsp;{{opt}}</b>
    </span>
    

    <强>代码

    $scope.isArray = function(val) {
        return angular.isArray(val)
    }
    
    $scope.filterByProperties = function(product) {
        // Use this snippet for matching with AND
        var matchesAND = true;
        for (var prop in $scope.filter) {
          if (noSubFilter($scope.filter[prop])) continue;
          if (!$scope.isArray(product[prop])) { //if its not an array
            if (!$scope.filter[prop][product[prop]]) {
              matchesAND = false;
              break;
            }
          } else {
            //if its an array
            for (var i = 0; i < product[prop].length; i++) {
              var anyPropMatch = false;
              if ($scope.filter[prop][product[prop][i]]) {
                anyPropMatch = true;
                break;
              }
            }
            if (!anyPropMatch) {
              matchesAND = false;
              break;
            }
          }
        }
        return matchesAND;
    };
    

    Working Plunkr