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

时间:2015-02-27 14:30:11

标签: javascript angularjs

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

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

  1. '品牌'函数将在两者都存在时运行,并且是独立的
  2. '材料'当两者都存在或独自站立时,函数将不会运行。
  3. 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;
        }
    }
    

    我仍然是角度的新手,我可以不运行相同的功能吗?谢谢!

1 个答案:

答案 0 :(得分:0)

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