试图使用Angular JS执行搜索过滤器时发生错误

Javascript error trying to perform a search filter using Angular JS

本文关键字：过滤器 错误 搜索 执行 Angular JS      更新时间：2023-09-26

在我的应用程序中，我尝试从一开始就通过部分匹配对名称执行搜索过滤器。下面是我要做的一个例子:

假设我有一个名字列表:

Ben
James
Adam
Judy
Andy

并在搜索字段中输入文本"a"，它将返回

Adam
Andy

如果我在搜索字段中进一步输入"an"，它将返回

Andy

在我的app.js中，我有代码:

var myApp = angular.module("myApp", []);
myApp.controller("myController", function ($scope) {
    var employees = [
        { name: "Ben", gender: "Male", salary: 55000, city: "London" },
        { name: "Jane", gender: "Female", salary: 62000, city: "Albany" },
        { name: "Rick", gender: "Male", salary: 65000, city: "Los Angeles" },
        { name: "Pam", gender: "Female", salary: 60000, city: "Paris" },
        { name: "Josh", gender: "Male", salary: 68000, city: "Brussels" },
    ];
    $scope.employees = employees;
    $scope.filtered = function (item) {
        if ($scope.searchName == undefined) {
            return true;
        } else {
            if (item.name.toLowerCase().startsWith($scope.searchName.toLowerCase()) != -1) {
                return true;
            }
        }
        return false;
    }
});

在我的html页面中，我有以下一行显示员工列表:

<tr ng-repeat="employee in employees | filter: filtered">

以及用户输入搜索文本的下面一行:

<input type="text" placeholder="Search Name" ng-model="searchName.name"> <br><br>

然而，当我尝试测试时，我得到了错误:

Error: $scope.searchName.toLowerCase is not a function. (In '$scope.searchName.toLowerCase()', '$scope.searchName.toLowerCase' is undefined)

由于您的ng-model被设置为searchName.name, $scope.searchName是一个对象，因此它没有.toLowerCase()功能。

你需要像这样调整if-case:

if (item.name.toLowerCase().startsWith($scope.searchName.name.toLowerCase()) !== -1) {}

此外，除非明确不需要严格的恒等运算符，否则建议使用恒等运算符而不是相等运算符。

ng-model被设置为searchName.name，所以您可能需要调用$scope.searchName.name.toLowerCase()而不是$scope.searchName.toLowerCase()

相关文章：