AngularJs搜索功能不区分大小写答案

【问题标题】：AngularJs Search Function Case InsensitiveAngularJs搜索功能不区分大小写
【发布时间】：2017-10-14 09:23:56
【问题描述】：

在下面的示例中，当我按“swa”字符串搜索时，我会得到“swap-dhule-21”行，当我按“Swa”搜索时，我会得到“Swati-jamner-67”行。我已经放
我的代码在这里供参考以了解问题。

我已经写了搜索功能。这里我想要不区分大小写的搜索
当我通过“swa”或“Swa”搜索时，我应该同时得到两者
行，即“swap-dhule-21”和“Swati-jamner-67”。

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
            <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
            <link rel="stylesheet" href="style.css" />
            <script src="script.js"></script>
        </head>
        <body ng-app="myModule" ng-controller="myController">
            <input type="text" class="form-control" placeholder="Filter..." ng-model="query">
            <table>
                <tr>
                    <th>
                        <input id="all" class="styled" type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
                    </th>
                    <th class="col-sm-2">First Name</th>
                    <th class="col-sm-2">Last Name</th>
                    <th class="col-sm-4">Email Id</th>
                </tr>

                <tr ng-repeat="item in filterData = (totalItems| filter : search) | limitTo:10:10*(page-1)">
                    <td><input id="member1" class="styled" type="checkbox" ng-model="item.Selected"></td>
                    <td class="col-sm-2 text-center">{{item.itemName}}</td>
                    <td class="col-sm-2 text-center">{{item.itemcity}}</td>
                    <td class="col-sm-4 text-center">{{item.quantity}}</td>
                </tr>
            </table>
        <uib-pagination max-size="maxSize"  boundary-links="true" class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
                        ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=10></uib-pagination>
    </body>


    <script>
        // Code goes here
        var myModule = angular.module('myModule', ["ui.bootstrap"]);
        myModule.controller('myController', function($scope) {
        $scope.page = 1;
        $scope.totalItems = [ {itemName: "Tom", itemcity: "pune", quantity : "11"},
        {itemName: "swap", itemcity: "dhule", quantity : "21"},
        {itemName: "ravi", itemcity: "chalis", quantity : "33"},
        {itemName: "rajan", itemcity: "akola", quantity : "54"},
        {itemName: "Swati", itemcity: "jamner", quantity : "67"},
        {itemName: "Tushar", itemcity: "nashik", quantity : "87"},
        {itemName: "pratik", itemcity: "mumbai", quantity : "98"},
        {itemName: "dfds", itemcity: "mumbai", quantity : "82"},
        {itemName: "jfghj", itemcity: "mumbai", quantity : "79"},
        {itemName: "fg", itemcity: "mumbai", quantity : "100"},
        {itemName: "fdgf", itemcity: "mumbai", quantity : "51"}
        ];
        $scope.displayItems = $scope.totalItems.slice(0, 10);
        $scope.pageChanged = function() {
        var startPos = ($scope.page - 1) * 10;
        //$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
        console.log($scope.page);
        };
        $scope.search = function (row) {
        return !!((row.itemcity.indexOf($scope.query || '') !== - 1 || row.quantity.indexOf($scope.query || '') !== - 1));
        };
        });
    </script>
    </html>

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/18082017/…
除了使用.toLowerCase()，你还需要修复你的$scope.search()函数。当一个过滤器被调用时，整个集合被传递给过滤器，但是您已经编写了过滤器，就好像它一次只得到一行一样。在您的 $scope.search() 函数中，row.itemcity 和 row.quantity 的值将始终为 undefined。
你好@neptune，请理解我的问题陈述。根据您的链接，它不应该完成我的要求。只是当我搜索“swa”时它会起作用，但是当我搜索“Swa”时它不应该起作用。
@SwapnilYeole，你找到解决办法了吗？

标签： angularjs

【解决方案1】：

您可以将所有内容转换为大写或小写以实现不区分大小写的搜索

$scope.search = function (row) {
        return !!((row.itemcity.toUpperCase().indexOf($scope.query.toUpperCase() || '') !== - 1 || row.quantity.indexOf($scope.query || '') !== - 1));
        };

【讨论】：

【解决方案2】：

String.indexOf() 函数区分大小写。请参阅MDN documentation 了解更多信息。

您可以调整您的测试函数以使用不区分大小写的正则表达式：

var someRegex = /hello/i;
someRegex('Hello').test(); //true

然而，角度方式是将过滤器应用于对象属性，我认为这个 SO 答案可能会有所帮助：How to filter by object property in angularJS

编辑：差点忘了，如果您正在寻找快速修复，您可以在进行比较之前将测试和要搜索的字符串都小写。 row.itemcity.toLowerCase().indexOf($scope.query.toLowerCase()...)。

【讨论】：