AngularJs自定义过滤器

AngularJS过滤器主要是用在对表达式的值进行再处理，再将处理后的值展示在视图中。

调用格式如下：{{ expression | filter:自定义参数 }}

其中，expression 是表达式，如果存在过滤器时，其会作为过滤器的第一个参数传入到过滤器中。filter是过滤器名称，冒号后是自定义参数。

AngularJS已经实现一些常用的内置过滤器，使用时我们直接引用就行：

currency,

dateFilte,

filterFilte,

jsonFilter,

limitToFilter,

lowercaseFilter,

numberFilter,

orderByFilter,

uppercaseFilter

特殊情况下我们也可以实现自己的过滤器，这个也相当容易：在你的模块中注册一个新的"过滤器工厂函数" 就行了。这个工厂函数需要返回一个过滤器函数，这个过滤函数的第一个参数接受的是输入(即：表达式的值)，除此之外还可定义任何的自定义参数。

下面做俩个典型的实例：

自定义格式化日期过滤器

将当前系统日期转为指定格式的形式

Html:

<html ng-app="MyReverseModule">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义格式化日期过滤器</title>
<script language="javascript" type="text/javascript" src="angular.js"></script>
<script language="javascript" type="text/javascript" src="controller.js"></script>
</head>

<body>
    <div ng-controller="Ctrl">
	  选择格式：<select ng-model="selDate">
	     <option value="0">YYYY-MM-dd</option>
		 <option value="1">YYYY年MM月dd日</option>
	  </select>
	  	<br />
	  <span>转换当前日期：{{selDate|formatDate}}</span>	 
    </div>
  </body>
</html>

Javascript:

//格式化日期
angular.module('MyReverseModule', []).
  filter('formatDate', function() {
    return function(input) {
       var date = new Date();
	   var year = date.getYear() + 1900;
	   var month = date.getMonth() + 1;	   
	   var day = date.getDate();
	   month = month <10 ? "0" + month : month;	   
	   day = day <10 ? "0"+day : day;
	   var str = "";
	   if(input == "0"){
		   str += year;
		   str += "-";
		   str += month;
		   str += "-";
		   str += day;
	   }else if(input == "1"){
		   str += year;
		   str += "年";
		   str += month;
		   str += "月";
		   str += day;
		   str += "日";
	   }
	   return str;
    }
  });

function Ctrl($scope) {
  $scope.selDate = "1";
}

自定义转化大写过滤器

将表达式中的小写转为daxie

Html:

<html ng-app="MyReverseModule">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义转化大写过滤器</title>
<script language="javascript" type="text/javascript" src="angular.js"></script>
<script language="javascript" type="text/javascript" src="controller1.js"></script>
</head>

<body>
    <div ng-controller="Ctrl">
	  <input ng-model="greeting" type="greeting"><br>
      转换为大写: {{greeting|reverse:true}}<br> 
    </div>
  </body>
</html>

{{greeting|reverse:true}}中我们传入自定义的参数值true，用来控制是否需要转换。

javascript:

angular.module('MyReverseModule', []).
  filter('reverse', function() {
    return function(input, uppercase) {
      if (uppercase) {//是否需要转为大写
        input = input.toUpperCase();
      }
      return input;
    }
});
  
function Ctrl($scope) {
  $scope.greeting = 'hello';
}

+友情链接