Question

在下面的示例中，当我通过＆＃39; swa＆＃39;字符串我将得到＆swap; dhule-21＆＃39;当我用“Swa＆＃39;我会得到＆＃39; Swati-jamner-67＆＃39;我放了我的代码在这里作为问题理解的参考。

我有写搜索功能。我想要不区分大小写的搜索当我用'swa＆＃39;或者＆＃39; Swa＆＃39;我应该得到两个行，即swap-dhule-21＆＃39;和＆＃39; Swati-jamner-67＆＃39;。

<!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>

Answer 1

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

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

Answer 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（）...）。

AngularJs搜索功能案例不敏感

2 个答案: