创建自定义角度过滤器

Creating custom angular filters

本文关键字：过滤器 自定义 创建      更新时间：2023-12-09

我有一个物品的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"）时，它工作得很好，但我不能冒险为我的应用程序使用如此广泛的过滤器。

感谢您的帮助：）

我认为问题出在函数的forEach部分。forEach函数不返回值。您正在向迭代器函数返回一个值，由于forEach没有从迭代器返回返回的值，因此您在$scope.shoppingCart.push($filter('barcodeScanner')($scope.parts, $scope.ItemToAdd)); 中没有什么可推的

保存到一个变量，即在匿名工厂（包装器）函数内部声明的matchedPart，并在forEach函数外部返回它，应该可以解决未定义的：

 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函数进行重构。没有两个单独的。将isUndefine检查与!angular.isUndefined(vals.Part_Number) && !angular.isUndefined(vals.Other_Part_Number) && vals.Part_Number... 结合

您需要检查==而不是.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)))

希望这能对你有所帮助。谢谢

相关文章：