AngularJs搜索函数不区分大小写_Angularjs

AngularJs搜索函数不区分大小写

angularjs

AngularJs搜索函数不区分大小写,angularjs,Angularjs,在下面的示例中，当我按“swa”字符串搜索时，我将得到“swap-dhule-21”行，当我按“swa”搜索时，我将得到“Swati-jamner-67”行。我已将我的代码在这里作为理解问题的参考我有写搜索功能。这里我需要不区分大小写的搜索当我通过“swa”或“swa”进行搜索时，我应该同时获得这两个值行，即“swap-dhule-21”和“Swati-jamner-67” <!DOCTYPE html> <html> <head&g

在下面的示例中，当我按“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>


名字
姓
电子邮件Id
{{item.itemName}
{{item.itemcity}
{{item.quantity}
//代码在这里
var myModule=angular.module（'myModule'，[“ui.bootstrap”]）；
myModule.controller（'myController'，函数（$scope）{
$scope.page=1；
$scope.totalItems=[{itemName:“Tom”，itemcity:“pune”，quantity:“11”}，
{itemName:“swap”，itemcity:“dhule”，quantity:“21”}，
{项目名称：“拉维”，项目城市：“查利斯”，数量：“33”}，
{项目名称：“rajan”，项目城市：“akola”，数量：“54”}，
{itemName:“Swati”，itemcity:“jamner”，quantity:“67”}，
{项目名称：“Tushar”，项目城市：“nashik”，数量：“87”}，
{项目名称：“pratik”，项目城市：“孟买”，数量：“98”}，
{项目名称：“dfds”，项目城市：“孟买”，数量：“82”}，
{项目名称：“jfghj”，项目城市：“孟买”，数量：“79”}，
{项目名称：“fg”，项目城市：“孟买”，数量：“100”}，
{项目名称：“fdgf”，项目城市：“孟买”，数量：“51”}
];
$scope.displayItems=$scope.totalItems.slice（0,10）；
$scope.pageChanged=函数（）{
var startPos=（$scope.page-1）*10；
//$scope.displayItems=$scope.totalItems.slice（startPos，startPos+3）；
log（$scope.page）；
};
$scope.search=函数（行）{
return！！（（row.itemcity.indexOf（$scope.query |？“”）！=-1 | | row.quantity.indexOf（$scope.query |？“”）！=-1））；
};
});

String.indexOf（）函数区分大小写。有关更多信息，请参阅

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

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

然而，角度的方法是对对象属性应用过滤器，我认为这个答案可能会有所帮助：

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

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

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

这可能会有帮助：除了使用

.toLowerCase（）

之外，还需要修复

$scope.search（）

函数。当一个过滤器被调用时，整个集合被传递给过滤器，但是您已经编写了过滤器，就好像它一次只得到一行一样。在

$scope.search（）

函数中，

row.itemcity

和

row.quantity

的值将始终是

未定义的

。Hello@neptune，请理解我的问题陈述。根据您的链接，它不应满足我的要求。简单地说，当我搜索“swa”时，它将工作，但当我搜索“swa”时，它不应工作。@Swapnilyole，您找到解决方法了吗？