在 AngularJS 中如何按对象属性进行过滤-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 开发中，我们经常需要从列表或集合中根据对象的某些属性进行过滤。本文将介绍如何在 AngularJS 中按对象属性进行过滤并提供示例代码。

过滤器 Filter

AngularJS 为我们提供了强大的过滤器(Filter)功能，可以对数据进行排序、筛选等操作。其中，filter 过滤器可以根据指定的过滤条件对数组进行过滤。

以下是一个基本的 filter 使用示例：

<div ng-repeat="item in items | filter:searchText">
    {{ item.title }}
</div>

上面的代码用于展示一个包含多个项目的列表，并根据 searchText 过滤出符合条件的项进行展示。

按对象属性进行过滤

如果需要根据对象的某些属性进行过滤，则需要使用函数形式的 filter 过滤器。

以下是一个根据对象属性进行过滤的示例：

<div ng-repeat="item in items | filter:filterByProperty">
    {{ item.title }}
</div>

$scope.filterByProperty = function(item) {
    return item.propertyName === $scope.filterValue;
};

在上面的示例中，我们定义了一个名为 filterByProperty 的过滤函数，该函数接收一个参数 item，表示当前正在处理的列表项。然后，函数判断 item 对象中的 propertyName 属性是否等于 $scope.filterValue 变量的值，如果等于则返回 true，否则返回 false。最后，在 ng-repeat 中使用 filterByProperty 函数进行过滤。

完整示例代码

以下是一个完整的按对象属性进行过滤的示例代码：

<div ng-controller="MyController">
    <input type="text" ng-model="filterValue">
    <div ng-repeat="item in items | filter:filterByProperty">
        {{ item.title }}
    </div>
</div>

-- -------------------- ---- -------
--- --- - ----------------------- ----

------------------------------ ---------------- -
    ------------ - -
        - ------ ----- --- ------------- ----------- --
        - ------ ----- --- ------------- ----------- --
        - ------ ----- --- ------------- ----------- -
    --

    ----------------------- - -------------- -
        ------ ----------------- --- -------------------
    --
---

在上面的示例中，我们创建了一个名为 MyController 的控制器，并在其中定义了一个数组 items，包含多个对象，每个对象都有一个 title 属性和一个 propertyName 属性。然后，我们定义了一个 filterByProperty 函数用于根据 propertyName 进行过滤。最后，在 HTML 模板中使用 ng-repeat 和 filter 过滤器将过滤后的列表项展示出来。

总结

在 AngularJS 中按对象属性进行过滤需要使用函数形式的 filter 过滤器。我们可以定义一个过滤函数，根据对象的某些属性进行判断并返回布尔值。通过这种方式，我们可以在 AngularJS 中轻松实现列表按对象属性进行过滤的功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25090