Question

我有一个过滤数组中列表的函数。该功能适用于过滤品牌＆＃39;财产，但我不能让它过滤材料＆＃39;属性。

它完全相同并且完全相同，只是它过滤了不同的属性。我不知道是什么阻止了这一点，但是：

＆＃39;品牌＆＃39;函数将在两者都存在时运行，并且是独立的
＆＃39;材料＆＃39;当两者都存在或独自站立时，函数将不会运行。

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;
    }
}

我仍然是角度的新手，我可以不运行相同的功能吗？谢谢！

Answer 1

所以，过去两天我花了大概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”才能将数组打印到屏幕上。

相同的功能不适用于不同的属性

1 个答案: