尝试使用 Angular JS 执行搜索过滤器时出现 Javascript 错误

Question

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

假设我有一个姓名列表:

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)

Answer 1

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

您需要像这样调整您的 if-case:

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

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