AngularJS过滤器部分功能介绍

Hello大家好，继前面几篇文章对AngularJS部分功能的介绍，今天我们再来谈谈AngularJS的过滤器及其使用方法。

我们在写网页的时候经常会遇到需要对所给的数据进行一些类型处理或选择的操作，比如我们最常见的搜素框等，那么我们具体应该用AngularJS来怎样实现这样一个功能呢？

接下来我们将一步一步来实现这个功能，Go，Follow me！

一、首先我们来认识一下过滤器

过滤器其实是Angular里面的一种写法，整个格式为：（ 需要过滤的元素 | 需要过滤的规则 ）。比如我需要将abc这三个小写字母转换成大写的ABC，则格式为：（ abc | uppercase ）,那么输出的即为ABC。代码如下：

Html：

{}过滤后为 {{ Name | uppercase }}

逻辑代码：

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

app.controller("a", function($scope) {

$scope.Name = "abc";

});

效果图：

二、接下来我们来认识一下“ng-repeat”这个指令

“人如其名，字现其意”。我们看repeat就知道了，这是一个让XX重复的意思。这里的XX一般是数组，比如后端传回来的接口字段。有了这个指令，那我们前端的工作马上就变得势如破竹了。具体我们来看看下面这个实例。小二，上代码：

{},{},{}

HTML：

逻辑代码：

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

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

$scope.nameList = [

{

"Name" : "老王",

"Country" : "隔壁",

"gender" : "男"

},

{

"Name" : "小明",

"Country" : "地球",

"gender" : "男"

},

{

"Name" : "大牛",

"Country" : "太空",

"gender" : "男"

},

{

"Name" : "小花",

"Country" : "梦中",

"gender" : "女"

}

]

});

效果图：

上面实例中将数组nameList的元素一一遍历并渲染到前端页面，这都是指令“ng-repeat”的功劳。相信通过这个实例，我们对“ng-repeat”已经有了一个初步的印象。

三、过滤器 +“ng-repeat”= ？

通过上面两个例子，我们已经对过滤器和“ng-repeat”有了相应的认识。接下来我们将把它俩结合起来，来实现我们的搜索框功能。各位看官，请拭目以待！

HTML：

请输入过滤关键词：

{}

逻辑代码：

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

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

// 此处的nameList为数组名字，你可以任意命名

$scope.nameList = [

{

"Name" : "老王",

"Country" : "隔壁",

"gender" : "男"

},

{

"Name" : "小明",

"Country" : "地球",

"gender" : "男"

},

{

"Name" : "大牛",

"Country" : "过去",

"gender" : "男"

},

{

"Name" : "小花",

"Country" : "梦中",

"gender" : "女"

}

]

});

效果图如下：

图1：未输入前的效果图

图2：输入过滤词“男”后的效果图

图3：输入过滤词“女”后的效果图

图3：输入过滤词“球”后的效果图

至此，一个基本的过滤搜索框就写好了。

附源码如下：

过滤器-搜索过滤

请输入过滤关键词：

{}

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

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

// 此处的nameList为数组名字，你可以任意命名

$scope.nameList = [

{

"Name" : "老王",

"Country" : "隔壁",

"gender" : "男"

},

{

"Name" : "小明",

"Country" : "地球",

"gender" : "男"

},

{

"Name" : "大牛",

"Country" : "过去",

"gender" : "男"

},

{

"Name" : "小花",

"Country" : "梦中",

"gender" : "女"

}

]

});