相同的函数不适用于不同的属性

Same function not working on different properties

本文关键字：属性 适用于 函数 不适用      更新时间：2024-06-30

我有一个函数来过滤数组中的列表。该函数在过滤"brands"属性时有效，但我无法使其用于过滤"material"属性。

它完全相同，做完全相同的事情，只是它过滤了不同的属性。我不知道是什么阻止了这一切，但是：

  1. "brands"功能将在两者都存在且独立时运行
  2. 当两人都在场或单独站立时，"材料"功能将不会运行

HTML（品牌功能复选框）[工作]

<div class="filter-content">    
<input type="checkbox" ng-click="includeBrand('Brand A')"/>Brand A<br>
            <input type="checkbox" ng-click="includeBrand('Brand B')"/>Brand B<br>
            <input type="checkbox" ng-click="includeBrand('Brand C')"/>Brand C<br>
</div>

JS（品牌功能）[工作]

$scope.brandIncludes = [];
    $scope.includeBrand = function(brand) {
        var i = $.inArray(brand, $scope.brandIncludes);
        if (i > -1) {
            $scope.brandIncludes.splice(i, 1);
        } else {
            $scope.brandIncludes.push(brand);
        }
    }
    $scope.brandFilter = function(products) {
        if ($scope.brandIncludes.length > 0) {
            if ($.inArray(products.brand, $scope.brandIncludes) < 0)
                return;
        }
        return products;
    }
}

HTML（材料功能复选框）[不起作用]

    <div class="filter-content">
     <input type="checkbox" ng-click="includeMaterial('dry')"/>Dry Materials<br>
        <input type="checkbox" ng-click="includeMaterial('wet')"/>Wet Materials<br>
        <input type="checkbox" ng-click="includeMaterial('oil')"/>Oils<br>
</div>

JS（物料功能）[不起作用]

$scope.materialIncludes = [];
    $scope.includeMaterial = function(material) {
        var i = $.inArray(material, $scope.materialIncludes);
        if (i > -1) {
            $scope.materialIncludes.splice(i, 1);
        } else {
            $scope.materialIncludes.push(material);
        }
    }
    $scope.materialFilter = function(products) {
        if ($scope.materialIncludes.length > 0) {
            if ($.inArray(products.material, $scope.materialIncludes) < 0)
                return;
        }
        return products;
    }
}

我对angular还是个新手，我可以不运行同样的功能吗？谢谢

所以，在过去的两天里，我花了大约10个小时盯着我的JS寻找答案。我似乎忘记了有一个"过滤函数"可以被调用来解决我的问题。我明确指出，事实并不是我的过滤器不起作用，而是或多或少没有包含在我的HTML中。

以下是我必须更改才能使其工作的内容：

<div class="product-results">
            <div class="info" ng-repeat="p in products | filter:brandFilter | filter:materialFilter">
                {{p.name}}
                {{p.brand}}
              <img 
         ng-if="products.src"
         ng-src="{{products.src}}">
            </div>

我不得不在将数组打印到屏幕上的课堂上添加"|filter:materialFilter"。

相关文章：