angularjs_filter用法_基本用法

AngularJS Filter 用法 基本用法

1、什么是 AngularJS Filter？

AngularJS Filter 是用于对数据进行过滤和格式化的指令，它可以在 HTML 模板中直接使用，也可以在控制器中使用。

2、如何使用 AngularJS Filter？

在 HTML 模板中使用过滤器：

```html

<div ngapp="myApp">

<input type="text" ngmodel="searchText">

<ul>

<li ngrepeat="item in items | filter:searchText">{{ item }}</li>

</ul>

</div>

```

在控制器中使用过滤器：

```javascript

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.items = ['apple', 'banana', 'orange'];

$scope.searchText = '';

});

```

3、常用的 AngularJS Filter 有哪些？

lowercase：将文本转换为小写。

uppercase：将文本转换为大写。

limitTo：限制显示的字符数。

orderBy：根据指定条件对数组进行排序。

filter：根据指定的条件过滤数组。

date：格式化日期。

number：格式化数字。

currency：格式化货币。

json：将对象转换为 JSON 字符串。

removeEmptyStrings：移除空字符串。

unique：移除数组中的重复元素。

reverse：反转数组。

startsWith、endsWith：判断字符串是否以指定字符开头或结尾。

substring：截取字符串的一部分。

slice：截取数组的一部分。

join：将数组元素连接成一个字符串。

replace：替换字符串中的某个字符或子串。

search：查找字符串中是否包含指定字符或子串。

match：匹配字符串是否符合指定的正则表达式。

split：将字符串分割成数组。

capitalize：将文本的首字母大写。

limitToRange：限制显示的字符数范围。

timespan：格式化时间间隔。

defaultIfEmpty：如果数组为空，则返回默认值。

removeDuplicates：移除数组中的重复元素，并保留原始顺序。

unique：移除数组中的重复元素，并重新排序。

customFilter：自定义过滤器，可以根据需要编写自己的过滤器函数。

相关问题与解答：

1、Q: 如何在 AngularJS Filter 中使用多个过滤器？

A: 可以在一个过滤器链中使用多个过滤器，用管道符（|）分隔每个过滤器的名称和参数。{{ item | filter:searchText | lowercase }} 会先过滤出符合条件的项目，然后将结果转换为小写。

2、Q: 如何在控制器中自定义一个过滤器？

A: 可以在控制器中定义一个过滤器函数，并将其添加到 $scope 对象上作为属性，然后在 HTML 模板中使用该过滤器时，只需使用过滤器名称即可调用该函数，在控制器中定义一个名为 "customFilter" 的过滤器函数，可以这样使用它：{{ item | customFilter }}