javascript - 自定义过滤器最初有效，但在执行搜索后无效

Question

我正在尝试解决自定义过滤器的问题。我配置了一个 jsFiddle to replicate the issue .

缺货过滤器是具有奇怪行为的自定义过滤器。最初它工作正常。但是，如果您在搜索框中输入文本，从搜索框中删除文本，然后再次尝试使用“缺货”过滤器，则不会返回任何结果。

我被难住了。我认为这可能与过滤器逻辑在 Controller 中的工作方式有关，但我不明白为什么在搜索中输入文本后它不读取项目数量值。

这是“缺货”过滤器的自定义过滤器逻辑:

  $scope.changeStockFilter = function() { // this function call on change checkbox value
    if ($scope.searchInventory.qty === 0) {
      $scope.exactMatching = true; // if qty 0 then set true
    } else {
      $scope.exactMatching = false;
    }
  };

过滤函数的调用方式

        <div class="checkbox">
            <input type="checkbox" name="filter" ng-model="searchInventory.inventory" data-ng-true-value="0" data-ng-false-value="''" ng-change="changeStockFilter()">
            Out of Stock
        </div>

这就是将过滤器应用于 ngrepeat 的方式

<div ng-repeat="item in inventory | filter: searchInventory : exactMatching | orderBy:sortOrder as filtered_result track by $index">

我还认为过滤器中的“跟踪依据”可能存在问题，假设我使用不当。我阅读了下面链接的几页，我认为这不是这里的问题。当然，我可能是错的。

• > angular docs ngrepeat
• > apply track by index and filter for ng
• > ng-repeat-with-filter-and-track-by-index-not-working

我将不胜感激有关此问题的任何指导。谢谢!!!

Answer 1

使用搜索后，您的过滤器对象如下所示:

{ "qty": 0, "$": "" }

连同 exactMatching = true 这不会返回任何结果，因为 angular 在这种情况下使用严格比较 (angular.equals(actual, expected)) 而不是不区分大小写子字符串匹配，但由于这部分 "$": "" 而未找到任何内容(这意味着应该至少有一个属性等于空字符串)。

您应该对 outOfStock 事物使用单独的过滤器并进行严格比较。其他过滤器应使用 不区分大小写的子字符串匹配:

<div ng-repeat="item in inventory | filter: searchInventory | filter : outOfStockFilter | orderBy:sortOrder as filtered_result track by $index">

过滤函数:

$scope.outOfStockFilter = function(value, index, array) {
    return $scope.searchQty != 0 || value.qty === 0;
};

这里是工作叉:http://jsfiddle.net/f417v1nn/