Question

我是Angular的新手，我需要你的帮助来编写一个自定义过滤器，我可以在其中搜索所有数组对象并得到我的匹配结果，忽略句点（。）和逗号（，）。例如，如果我输入“ashton”，我应该得到“藏匿”和“ashton marton”。但我不知所措，需要一些建议。这是我到目前为止所拥有的。

在我的angularSearch.html中，我有这个。

<!DOCTYPE html>
<html>
<head>
    <script src="js/angular.js"></script>x
    <title></title>
</head>
<body ng-app="storeSearch">
<div ng-controller="searchController">
    <label>Search: </label>
    <input type="text" class="search" ng-model="searchString" placeholder="Search"/>
<table>
    <tr ng-repeat="p in products | searchFilter: searchString">
        <td>{{p.product_code}}</td>
        <td>{{p.subname}}</td>
        <td>{{p.description}}</td>
    </tr>
</table>
</div>
<script src="app/app.js"></script>
</body>
</html>

我的app.js如下所示。

var app = angular.module("storeSearch", []);

app.controller("searchController", ["$scope", function($scope){
    $scope.products = [
        {
            product_title: "A-2368",           
            description:"Asthon Martin",
            sub_name:"2000 model ashton martin"
        },
        {
            product_title:"S-2310",           
            description:"Stash of money",
            sub_name:"Rolls Royce"
        },
        {
            product_title:"h-2369",           
            description:"Honda Civic 2003",
            sub_name:"Marton Ashton, Honda Series"
        }
    ];

}]);

app.filter('searchFilter', function(){
    return function(arr, searchString){
        if(!searchString){
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(products){
            if(products.value.toLowerCase().indexOf(searchString) !== -1){
                result.push(products);
            }
        });
        return result;
    };
});

Answer 1

为了让过滤器正常工作，您需要更改的一件事是：

products.value.toLowerCase().indexOf(searchString)

value不是数组的属性，因此请尝试将其更改为：

products.description.toLowerCase().indexOf(searchString)

这将比较属性description。现在您可以实现详细信息。您的版本在控制台中导致错误，因为products.value未定义，并且您尝试在未定义时调用toLowerCase()。我的建议将解决这个问题。

<强>更新

如果您想要遍历所有属性，可以尝试像这样扩展循环：

angular.forEach(arr, function(products) {
    for (var property in products) {
        if (products.hasOwnProperty(property)) {
            if (products[property].toLowerCase().indexOf(searchString) !== -1) {
                result.push(products);
                break;
            }
        }
    }
});

更新2

根据你的评论，你想稍微修改一下属性的比较，我想你也想选择你想要比较的属性。

app.filter('searchFilter', function() {
    return function(arr, searchString) {
        var result, property, activePropertyList;

        activePropertyList = ['description', 'product_title', 'sub_name'];
        result = [];

        function isPartofSearchString(propVal, searchString) {
            propVal = propVal.replace(/\W+/g, '').toLowerCase();

            return propVal.indexOf(searchString) !== -1;
        }

        if (!searchString) {
            return arr;
        }

        searchString = searchString.toLowerCase();

        angular.forEach(arr, function(products) {
            for (property in activePropertyList) {
                if (isPartofSearchString(products[property], searchString)) {
                    result.push(products);
                    break;
                }
            }
        });

        return result;
    };
});

函数isPartofSearchString()取代你的critera（这会让事情变得更清晰）。 activePropertyList[]定义要与之比较的所有属性的名称。由于您有一个||表达式，只要一个属性符合您的条件就足够了 - ＆gt;因此break使其更有效率。

我知道，这里仍有改进空间：例如您可以将过滤器的一部分移动到控制器（比较函数和活动属性的定义），但我想将您的代码保留在此示例的过滤器中。

希望有所帮助。

Answer 2

app.filter('searchFilter', function(){
    return function(arr, searchString){
        var stripped = searchString.replace(',', '').replace('.', '').toLowerCase();
        return arr.filter(function(member) {
            return member.description.indexOf(stripped) > -1;
        });
    };
});

角度查询搜索所有数组对象

2 个答案: