angularJS过滤器 {{name}}

angularJS

      首先我们要对angularJS有一定简单的了解的过滤器

angularJS过滤器（大标题小标题）

        |:管道符号，用来分割数据和过滤器

currency:货币金额的操作

      代码示例： （此次展现了所有代码，下次将只展现核心代码）

{{price|currency}}

页面结果展示：

可通过currency中增加参数的方法来改变货币的单位（类似与传参根据参数的不同，可进行多参传递currecy:"一参":"二参":"三参"）

代码示例：

{{price|currency:"￥"}}

页面展示结果示例：

number：将数字转换为文本的格式

代码示例：

{{price|number}}

页面展示结果示例：（只有分隔符，没有小数点以及货币符号）

当数字有小数点时（数字为6215387216.7253726）会自动截取小数点前三位（也可通过传参的方式对小数点的截取个数进行传参）number：参数0-n

页面展示结果示例：

代码示例：（截取两位）

{{price|number:2}}

页面展示结果示例:

lowercase/uppercase:转换大小写

json：可对json格式进行调试（注意：要使用在

标签中因为该标签可以识别空格和转行） 
  

代码示例：

{{json|json}}

  

页面展示结果示例：

limitTo：截取的操作，针对数组，字符串也可以

代码示例：

$scope.con=['a','b','c','d'];

{{con|limitTo:2}}

页面展示结果示例：

date：日期格式化，输入毫秒数然后进行计算输出日期（可在冒号后进行传参用来规定日期的格式可在官网上详细查询参数的类型）

代码示例：

$scope.con='32784674682149';

{{con|date}}

页面展示结果示例：

代码示例：（有参数）

{{con|dat e:'yyyy' }}

页面展示结果示例：

orderBy：排序针对数据针对value

代码示例：（如果是字符串排序则是按照字符的顺利，数字则是大小）

$scope.con=[{"color":"red","age":"20"},
{"color":"blue","age":"30"},
{"color":"yellow","age":"40"},
{"color":"white","age":"10"}];
}]);

{{con|orderBy:'color'}}

页面展示结果示例：

代码示例：（有第二个参数：如果是true，则是从大排到小；如果是false，则是从小排到到）

{{con|orderBy:'color':true}}

页面展示结果示例：

filter：过滤针对数据当中的value值对key值无用。也可匹配vaule当中包含的值，当第二个参数为true时是全局匹配

代码示例：

{{con|filter:'20'}}

页面展示结果示例：

过滤器扩展

• 可组合使用过滤器
• JS中使用过滤器    

— $scope/$rootScope/$timeout

—$filter(使用依赖注入的方法注入)

代码示例：（使用大写转换器转换示例）

m.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.name = $filter('uppercase')('hello');
}]);

{{name}}

页面展示结果示例：

代码示例：（使用数字转换器并进行传参）

$scope.name = $filter('number')('42738148.3678213',1);

页面展示结果示例：

• 自定义过滤器   

—angular.module

 >>controller/run （可以不适用控制器controller）

代码示例：

var m=angular.module('myApp',[]);
m.run(['$rootScope',function($rootScope) {
$rootScope.name = 'hello';
}]);

{{name}}

页面展示结果示例：

>>filter（在JS中也可以使用）

代码示例：（将字符串的首字符转换为大写）

var m=angular.module('myApp',[]);
m.filter('firstUpper',function(){
return function(str){//在此函数进行传参（str,参数）
return str.charAt(0).toUpperCase()+str.substring(1);
}
});
m.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.name = 'hello';
}]);

{{name|firstUpper}}

//若传参

页面展示结果示例：