还是老习惯我们先来看看官方关于$filter服务的文档
- $filter
- 过滤器是用来格式化数据然后将这些数据展示给用户的
- 在html模板中使用的方法如下:
{{expression [ | filter_name[:parameter_value] ... ]}}
- 使用
- $filter(filterName)
- 参数 -
filterName[string]
:过滤器的名字 - 返回值- 一个过滤器函数
- 官方用例如下:
html代码:
html
<div ng-controller="MainCtrl"> <h3>{{ originalText }}</h3> <h3>{{ filteredText }}</h3> </div>
JS代码:
javascript
angular.module('filterExample', []) .controller('MainCtrl', function($scope, $filter) { $scope.originalText = 'hello'; $scope.filteredText = $filter('uppercase')($scope.originalText); });
结果可以看这里jsfiddle代码
看了上面的代码,我们也就掌握了$filter的基本使用方法,下来我们要创建自己的filter
这才是真正好玩的事情^_^
T1:首先我们来创建我们的第一个filter
- 功能:我们在一个输入框中输入一段字符串,如果这段字符串可以转换为数字的话;
那么我们就在这段字符串的后面加上一句话" is a number",否则在字符串后面加上" is not a number "
html代码如下:
html
<div ng-app="MyApp"> <div ng-controller="MyController"> <input ng-model="beforeFilter" type="text"> <div ng-bind="afterFilter"></div> </div> </div>
JS代码如下:
javascript
angular.module("MyApp", []) // D1 .filter("MyFilter", function () { // D2 return function (beforeFilter) { if (isNaN(beforeFilter)) { return beforeFilter + " is not a number "; } else { return beforeFilter + " is a number "; } } }) .controller("MyController", function ($scope, $filter) { // D3 $scope.$watch("beforeFilter", function (newVal) { $scope.afterFilter = $filter("MyFilter")(newVal); }) });
结果可以看这里T1-jsfiddle代码
关于上面代码的解释:
- D1部分使用filter创建了一个名字叫MyFilter的过滤器,注意,Myfilter后面的回调函数必须返回一个函数,我们在这个函数中写关于数据格式化的代码。
- D2部分,我们给返还的函数中传递了一个参数,这个参数就表示过滤器将要处理的原来的数据,然后我们对其进行一顿操作,对传递进来的参数我们判断它是否可以转换成一个数字,然后再作相应的操作。
- D3部分我们还是用了
$watch
对我们要检测的表达式进行检测,一旦我们监测的表达式发生变化,我们就对其进行过滤操作。
T2:在这部分中我们将创造一个可以使用参数的过滤器,有没有一点兴奋呢?
- 功能:我们在一个输入框中输入一段字符串,然后将这段字符串中我们想要的特定位置的那个字符大写
html代码如下:
html
<div ng-app="MyApp"> <div ng-controller="MyController"> <input ng-model="beforeFilter" type="text"> <div ng-bind="afterFilter"></div> // H1 <div>{{"hello" | nUpperFilter:1}}</div> </div> </div>
JS代码如下:
javascript
angular.module("MyApp", []) .filter("nUpperFilter",function(){ // D1 return function(input, n){ if(isNaN(input)){ var output = []; var index = n - 1 || 0; var indexChar = input[index].toUpperCase(); for(var i = 0; i < input.length; i++){ if(index == i){ output.push(indexChar); } else{ output.push(input[i]); } } // D2 return output.join(''); } else{ return input; } } }) .controller("MyController", function ($scope, $filter) { $scope.$watch("beforeFilter", function (newVal) { $scope.console = newVal; // D3 $scope.afterFilter = $filter("nUpperFilter")(newVal,2); }) });
结果可以看这里T2-jsfiddle代码
下面是关于上面代码的一些解释:
- D1我们给返还的函数添加了一个参数n,这个参数可以帮助我们做更多的事情,让我们有能力在传入的原始数据的特定位置改变其大小写。
- D2因为返回的结果是一个数组,而我们想要一个字符串,所以使用了
join()
方法。 - D3需要注意的是,
$filter("nUpperFilter")(newVal,2)
的参数是两个,第二个参数就是要改变的字符串中特定字母的的位置。 - H1部分,html代码部分使用也有一点不同,要加入参数
<div>{{"hello" | nUpperFilter:1}}</div>
当然如果大家还想深入地了解的话,我推荐大家两篇文章
如果大家觉得我哪里有不对的地方,还望及时提出,大家一起进步^_^
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。