创建自定义 angular 过滤器

Question

我有 json 个项目和一个条形码扫描器，条形码扫描器直接输入到我的应用程序中。

现在这些物品有一个主要部件号和一个次要部件号，条形码扫描仪的结果通常是主要部件号，但我必须同时检查两者才能确定。

我正在尝试实现一个自定义过滤器来执行此操作，但它似乎不起作用，任何人都可以让我知道我做错了什么吗？

 storeApp.filter('barcodeScanner', function() {
                return function(parts, barcode) {
                   angular.forEach(parts, function (vals, key) {
                       if( !angular.isUndefined(vals.Part_Number) && vals.Part_Number !== null  )
                            if (angular.equals(vals.Part_Number,barcode)) 
                                return parts[key];
                   });
                   angular.forEach(parts, function(vals, key) {
                        if ( !angular.isUndefined(vals.Other_Part_Number) && vals.Other_Part_Number !== null )
                            if (angular.equals(vals.Other_Part_Number,barcode)) 
                                return parts[key];
                   });
                };
            });

然后我稍后在控制器中调用过滤器，

$scope.addItemToCart = function() {
                   $scope.shoppingCart.push($filter('barcodeScanner')($scope.parts, $scope.ItemToAdd));
                   console.log($scope.Cart.itemToAdd);
                   console.log($filter('barcodeScanner')($scope.parts, $scope.Cart.itemToAdd));
                   $scope.Cart.itemToAdd = "";
                   console.log($scope.shoppingCart);
                };

但是过滤器的结果一直返回未定义。我知道我想要的条目确实存在，因为当我使用普通的 $filter('filter') 它工作正常，但我不能冒险为我的应用程序使用如此广泛的过滤器。

感谢您的帮助:)

Answer 1

而不是 .equals 你需要检查 == 因为 string 不会完全等于 number

angular.equals 只不过是在 javascript === 中进行强烈检查，检查两个值是否与其类型相等。

if(angular.equals(vals.Other_Part_Number,barcode))

改为

if(vals.Other_Part_Number == barcode)

如果要严格检查，则需要使用 parseInt 将两个值都转换为数字，然后检查

if(angular.equals(parseInt(vals.Other_Part_Number),parseInt(barcode)))

希望对您有所帮助。谢谢。

Answer 2

我认为问题出在函数的 forEach 部分。 forEach 函数没有 return 值。您正在 return 为您的迭代器函数赋值，并且由于 forEach 不是 return 迭代器中的 returned 值，那么您将没有任何东西可以推入您的 $scope.shoppingCart.push($filter('barcodeScanner')($scope.parts, $scope.ItemToAdd));

保存到变量即。 matchedPart 在匿名工厂（包装器）函数内声明并在 forEach 函数外 return 应该解决未定义的问题：

 storeApp.filter('barcodeScanner', function() {
            return function(parts, barcode) {

                // declare a variable here
                   var matchedPart;

               angular.forEach(parts, function (vals, key) {
                   if( !angular.isUndefined(vals.Part_Number) && vals.Part_Number !== null  )
                        if (angular.equals(vals.Part_Number,barcode)) 
                           // save it to new variable  
                           matchedPart = parts[key];
               });
               angular.forEach(parts, function(vals, key) {
                    if ( !angular.isUndefined(vals.Other_Part_Number) && vals.Other_Part_Number !== null )
                        if (angular.equals(vals.Other_Part_Number,barcode)) 
                            // save it to new variable  
                           matchedPart = parts[key];
               });
                  // return it outside the forEach function  
                  return matchedPart;
            };
        });

最后说明：我还认为您应该通过组合您的 forEach 函数进行重构。没有 2 个单独的。将您的 isUndefined 检查与 !angular.isUndefined(vals.Part_Number) && !angular.isUndefined(vals.Other_Part_Number) && vals.Part_Number...

相结合

创建自定义 angular 过滤器

Creating custom angular filters

javascript

filter

angularjs

angular-filters