zoukankan      html  css  js  c++  java
  • 利用Angular的自定义过滤器功能实现单词的首字母大写

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

      

  • 相关阅读:
    团队开发冲刺第二阶段_1
    团队开发冲刺第一阶段_7
    mysql 官方集群
    Tomcat提高并发
    Percona XtraDB Cluster 5.7
    Mysql常用配置及优化
    Linux 常用命令
    数据库主从复制
    Linux 环境下Web环境搭建————ActiveMQ
    Linux 下Web环境搭建————redis
  • 原文地址:https://www.cnblogs.com/yanglei9308/p/6366225.html
Copyright © 2011-2022 走看看