本小案例结合双向数据绑定,带你轻松理解Angular的自定义过滤器的使用!
js部分如下:
angular.module("myApp",[]) .filter("changeFirst",function(){ //此处利用Angular的filter服务自定义改变单词首字母大小的过滤器 return function(str){ //返回值需要是一个函数对象 var arr = str.split(" "); //将目标值利用空格分割,保存为一个数组对象 arr = arr.map(function (ele) { //利用高阶函数map的方法将对每一个元素进行匹配 if(ele&&ele[0].charCodeAt()>=97&&ele[0].charCodeAt()<=122){ //判断当前单词是否是小写字母 ele = ele[0].toUpperCase()+ele.substring(1); } return ele; }); return arr.join(" "); //将改变后的数组arr以空格拼接为字符串,作为返回值 } }) .controller("filterCtrl",['$scope',"$filter",function($scope,$filter){ //Angular的服务依赖注入 此处必须有filter服务的注入
$scope.val = 'lili1 a';
}])
html部分如下:
<body ng-app="myApp"> <div ng-controller="filterCtrl"> <div> 首字母大写 : <input type="text" ng-model="val" /> <p ng-bind="val|changeFirst"></p> //注意过滤器的名称为我们自定义的名称 </div> </div> </body>