利用Angular的自定义过滤器功能实现单词的首字母大写

最新推荐文章于 2021-08-09 10:44:22 发布

weixin_30675247

最新推荐文章于 2021-08-09 10:44:22 发布

阅读量175

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yanglei9308/p/6366225.html

版权

本小案例结合双向数据绑定，带你轻松理解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>

转载于:https://www.cnblogs.com/yanglei9308/p/6366225.html

weixin_30675247

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用Angular的自定义过滤器功能实现单词的首字母大写

本小案例结合双向数据绑定，带你轻松理解Angular的自定义过滤器的使用！js部分如下：angular.module("myApp",[]).filter("changeFirst",function(){ //此处利用Angular的filter服务自定义改变单词首字母大小的过滤器　　return function(str){　　　　　　　//返回值需要是一个函数对象...
复制链接

扫一扫