AngularJS迭代器过滤详解，如何实现数据动态筛选与展示？

AngularJS入门教程之迭代器过滤详解

AngularJS 作为一款经典的前端框架，其数据绑定和指令系统为开发者提供了极大的便利，在处理集合数据时，迭代器（ng-repeat）和过滤器（filter）是两个核心功能，它们能够高效地渲染和筛选数据，本文将详细讲解 AngularJS 中迭代器与过滤器的使用方法、常见场景及高级技巧，帮助初学者快速掌握这一重要知识点。

迭代器 ng-repeat 基础用法

ng-repeat 是 AngularJS 中最常用的指令之一，用于遍历数组或对象并动态生成 HTML 元素，其基本语法为：

<div ng-repeat="item in items">  
  {{item.property}}  
</div>  

• item：当前遍历元素的别名，可在模板中直接使用。
• items：需要遍历的数组或对象。

示例：遍历一个用户列表

$scope.users = [  
  {name: 'Alice', age: 25},  
  {name: 'Bob', age: 30},  
  {name: 'Charlie', age: 28}  
];  

<div ng-repeat="user in users">  
  {{user.name}} - {{user.age}}  
</div>  

渲染结果为：

• Alice – 25
• Bob – 30
• Charlie – 28

ng-repeat 的高级特性

1. $index、$first、$$middle、$last

   • $index：当前元素的索引。
   • $first、$middle、$last：布尔值，表示是否为第一个、中间或最后一个元素。

     <div ng-repeat="user in users">  
     <span ng-if="$first">【首项】</span>  
     {{user.name}}  
     <span ng-if="$last">【末项】</span>  
     </div>  

2. track by 优化性能
   当数据包含重复对象或需要重新渲染时，可通过 track by 指定唯一标识符，避免重复渲染：

   <div ng-repeat="user in users track by user.id">  
     {{user.name}}  
   </div>  

过滤器 filter 的基础用法

过滤器用于格式化或筛选数据，可通过 符号调用，语法为：

{{ expression | filter:expression:comparator }}  

• expression：需要过滤的表达式。
• comparator：可选的比较方式（如 true 表示严格匹配）。

示例 1：字符串过滤

<input ng-model="searchText">  
<div ng-repeat="user in users | filter:searchText">  
  {{user.name}}  
</div>  

输入框中的文本会实时过滤 users 数组，仅显示匹配项。

示例 2：对象过滤

<div ng-repeat="user in users | filter:{age: 30}">  
  {{user.name}}  
</div>  

仅显示 age 为 30 的用户。

过滤器的进阶技巧

1. 自定义过滤器
   通过模块的 filter 方法可自定义过滤器，例如实现首字母大写：

   app.filter('capitalize', function() {  
     return function(input) {  
       return input.charAt(0).toUpperCase() + input.slice(1);  
     };  
   });  

   调用方式：

   {{user.name | capitalize}}  

2. 多条件过滤
   结合 filter 和 ng-show 实现复杂筛选：

   <div ng-repeat="user in users">  
     <div ng-show="user.age > 25 && user.name.indexOf('a') !== -1">  
       {{user.name}}  
     </div>  
   </div>  

迭代器与过滤器的常见问题及解决方案

1. ng-repeat 中的重复错误
   问题：当数组中包含重复对象时，控制台会报错。
   解决：使用 track by 指定唯一字段（如 id）。

   

2. 过滤器性能优化
   问题：大数据量时，filter 可能导致页面卡顿。
   解决：

   • 在控制器中预先过滤数据，减少模板中的计算量。
   • 使用 limitTo 限制显示数量：

     <div ng-repeat="user in users | filter:searchText | limitTo:5">  
       {{user.name}}  
     </div>  

3. 动态过滤条件
   问题：需要根据用户选择动态调整过滤逻辑。
   解决：将过滤条件绑定到作用域变量：

   $scope.filterOptions = {age: '', name: ''};  

   <div ng-repeat="user in users | filter:filterOptions">  
     {{user.name}}  
   </div>  

综合案例：动态搜索与分页

以下是一个结合 ng-repeat 和 filter 的搜索分页示例：

$scope.users = [...]; // 用户数据  
$scope.currentPage = 1;  
.itemsPerPage = 5;  
$scope.searchText = '';  
$scope.filteredUsers = function() {  
  var filtered = $scope.users.filter(function(user) {  
    return user.name.includes($scope.searchText);  
  });  
  return filtered;  
};  
$scope.totalPages = function() {  
  return Math.ceil($scope.filteredUsers().length / $scope.itemsPerPage);  
};  

<input ng-model="searchText">  
<div ng-repeat="user in filteredUsers() |  
  limitTo:itemsPerPage |  
  offset: (currentPage-1)*itemsPerPage">  
  {{user.name}}  
</div>  
<div>  
  <button ng-click="currentPage--" ng-disabled="currentPage <= 1">上一页</button>  
  <button ng-click="currentPage++" ng-disabled="currentPage >= totalPages()">下一页</button>  
</div>  

AngularJS 的迭代器和过滤器是处理动态数据的核心工具，通过 ng-repeat 可以灵活渲染列表，而 filter 则提供了强大的数据筛选能力，本文从基础用法到高级技巧，逐步展示了如何优化性能、解决常见问题，并通过综合案例帮助读者理解实际应用场景，掌握这些知识点，将为后续学习 AngularJS 的其他功能（如指令、服务）打下坚实基础。