创建自定义角度过滤器

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

我相信问题出在你的函数的 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 函数来重构。没有2个单独的。将您的 isUndefined 检查与!angular.isUndefined(vals.Part_Number) && !angular.isUndefined(vals.Other_Part_Number) && vals.Part_Number...结合起来

Answer 2

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

希望这可以帮助你。谢谢。