angularjs自定义过滤理解

来源:互联网 发布:软件架构设计之 编辑:程序博客网 时间:2024/06/05 10:44

        今天同事问道我关于argularjs自定义过滤器的理解,我没有说出个所以然来。于是在坐公交回来的路上我看了一些关于过滤器的内容。我将我对自定义过滤器的理解整理出来。方便自己以后翻阅。希望大家阅读后能够指出我理解错误的地方。

html:

<div ng-app="myApp" ng-controller="myCtrl">     <div> newString: {{"jj" | myfilter:1:2:3:5}}     </div>  </div>
js:

app.filter('myfilter', function() {     return function(text) {        var newArguments= Array.prototype.slice.call(arguments);        return text+newArguments.join(',');    }

这里首先解读一下:
1.自定义过滤器使用

在html上我们通过管道符(|)来划分,格式是{{过滤主体|过滤器名称:过滤参数1:过虑参数2}}

在js上。我主要说一下里面的函数 ,格式是return function(过滤主体,过滤参数1,过滤参数2){操作}

2.arguments:这里要提到arguments是js的对象,arguments代表参数,这里arguments接受到是实参,就是上面传入的类数组,里面有jj,1,2,3,5,而我们的形参只有一个,所以text是过滤主体

3.Array.prototype.slice.call(),这是一个Arry的方法这是将arguments类数组对象转成数组对象

4.join() 这是将数组以括号里的内容作为分隔符转成字符串

5. string+数组 (这里是因为去掉join(',')的结果跟有join结果一样)

这涉及到js的隐式转换,根据加法运算操作符规则,如果两个操作值都是字符串,则将它们拼接起来,如果只有一个操作值为字符串,则将另外操作值转换为字符串,然后拼接起来,如果一个操作数是对象、数值或者布尔值,则调用toString()方法取得字符串值,然后再应用前面的字符串规则。数组的元素被转换为字符串,这些字符串由逗号分隔,连接在一起。



原创粉丝点击