javascript - Angular 复选框过滤器不留下任何数据

Question

我的复选框过滤器完全删除所有数据记录而不是过滤。 我用这篇文章作为指导:http://jsfiddle.net/65Pyj/

我可以获得并控制选定的类别。我在过滤列表时遇到问题。

我的数据是这样的:

{"product_title":"COPD Track Package","product_code":"COPDPKG2014","id":"a1u40000000C182AAC","Id":"a1u40000000C182AAC","sort_order":"6","sort_code":"COPDPKG2014","category":["Postgraduate Course, Continuing Education"]}

这是 Angular :

<div class="container">
<div class="ng-scope" ng-app="products">
<div class="ng-scope" ng-controller="ShoppingCartCtrl">   
<div class="row">
<div class="col-sm-7"><h3 class="colored-title">Search Filter</h3>
<table class="table table-striped table-bordered">
<tbody>

<tr>
<td>By Product Title:</td>
<td><input ng-model="search.product_title" type="text"/></td>
</tr>
<tr>
<td>By Product Code:</td>
<td><input ng-model="search.product_code" type="text"/></td>
</tr>
<tr>
<td>By Presentation Title:</td>
<td><input ng-model="search.presentations" type="text"/></td>
</tr>
<tr>
<td>By Speaker Name:</td>
<td><input ng-model="search.speakers" type="text"/></td>
</tr>

<tr>
    <td><input type="checkbox" ng-click="includeProduct('Postgraduate Course')"/>Postgraduate Course</td>
    <td><input type="checkbox" ng-click="includeProduct('Continuing Education')"/>Continuing Education</td>
</tr>
    <tr><td>Filter dump: {{productIncludes}}</td></tr>
</tbody>
</table></div>

</div>

<div>Sort by:<select ng-model="sortExpression">
<option value="sort_code">Product Code</option>
<option value="product_title">Product Title</option>
</select></div>

<table class="table table-bordered table-striped">
<thead>
<tr class="warning"><th>Product Code</th><th>Product Title</th></tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search |filter:productFilter">
<td valign="top">
{{item.id}}<div ng-repeat="c in item.cat" >{{c}}</div>
</td>
<td>
{{item.product_title}}
</tr>
</tbody>
</table>
</div>




$scope.productIncludes = [];

        $scope.includeProduct = function(category){
            var i = $.inArray(category, $scope.productIncludes);
            if(i > -1){
                $scope.productIncludes.splice(i,1);
            }else{
                $scope.productIncludes.push(category);   
            }

            console.log($scope.items.length);
        }


         $scope.productFilter = function (items) {
        if ($scope.productIncludes.length > 0) {
            if ($.inArray(items.cat, $scope.productIncludes) < 0) return;
        }

        return items;
    }

Answer 1

基本上是您的数据表示有问题。

您将类别存储为 "category":["Postgraduate Course, Continuing Education"] 并且您想在这些类别中搜索，就好像它是一个数组，如 "category": [《研究生类(class)》、《继续教育》].

我建议你像第二种情况一样表示你的数据，然后你可以像这样迭代它:

$scope.productFilter = function (items) {
  if ($scope.productIncludes.length > 0) {
    var result = $scope.productIncludes.filter(function(n) {
      return items.category.indexOf(n) != -1
    });
    if(result.length < 1) {
      return;
    }
  }
  return items;
}

这是你的 fiddle :http://jsfiddle.net/65Pyj/133/

简短说明: filter 函数结合 indexOf 函数将返回两个数组的交集。