angular之constant和filter

1.7k8WEBangular2018-01-31

背景介绍

angular是什么：AngularJS最初由Misko Hevery和Adam Abrons于2009年开发，后来成为了Google公司的项目。AngularJS弥补了HTML在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展Web应用中的HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。

constant，可以算作angular的全局数据，想要使用的话，只需要在控制器注入即可。

$filter，angular的过滤器，如果想要在控制器里面使用，也是注入，然后调用，而html中的数据过滤，直接键入过滤器名称和对应值即可。

知识剖析

每当搜索constant时候，总会连带出现value的说明。

两者都可以作为全局变量使用，但是有两点不同：

1.value不可以在config里注入，但是constant可以。

2.value可以修改，但是constant不可以修改，一般直接用constant配置一些需要经常使用的数据。

下面是简单的应用例子：

angular.module('myApp', [])
.constant('apiKey', '123123123')
.value('FBid','231231231')
.controller('myController',function($scope,apiKey,FBid){
$scope.a = apiKey;
$scope.b = FBid;
})
.config(function(apiKey) {
//在这里apiKey将被赋值为123123123
//就像上面设置的那样
})
.config(function(FBid) {
//这将抛出一个错误，未知的provider: FBid
//因为在config函数内部无法访问这个值
});

filter是用来格式化数据用的

基本原型：{{expression | filter}}

多个filter连用版：{{expression | filter1 | filter2}}

传入参数版：{{expression | filter:1:2}}

常见问题

如何使用angular中constant和$filter？

解决方案

4.1 AngularJS内建了一些常用的filter：

1、格式化货币：

{{ 12 | currency}}  //将12格式化为货币，默认单位符号为'$',小数默认2位

{{ 12.45 | currency:'￥'}} //将12.45格式化为货币，使用自定义单位符号为'￥',小数默认2位

{{ 12.45 | currency:'CHY￥':1}} //将12.45格式化为货币，使用自定义单位符号为'CHY￥',小数指定1位,会执行四舍五入操作

{{ 12.55 | currency:undefined:0}} //将12.55格式化为货币， 不改变单位符号， 小数部分将四舍五入

2、格式化日期：

{{ 1304375948024 | date:'medium'}}//May 03, 2011 06:39:08 PM

{{ 1304375948024 | date }}//结果：May 3, 2011

{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}//结果：05/03/2011 @ 6:39AM

{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}//结果：2011-05-03 06:39:08

3、过滤数组：

$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]

{{arr | filter:'s'}}  //查找含有有s的行//上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

{{arr | filter:{'name':'ip'} }}//查找name like ip的行//上例结果:[{"age":20,"id":10,"name":"iphone"}]

4、将对象格式化成标准的JSON格式：

1	{{ {name:'Jack', age: 21} \| json}}

5、字符串，对象截取：

{{ "i love tank" | limitTo:6 }}//结果：i love

{{ "i love tank" | limitTo:-4 }}//结果：tank

{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }}//结果：[{"age":20,"id":10,"name":"iphone"}]

6、大小写转换：

1 2	China has joined the {{ "wto" \| uppercase }}. We all need {{ "MONEY" \| lowercase }}.

7、数值类：

1 2	{{ 1.234567 \| number:1 }} //结果：1.2 {{ 1234567 \| number }} //结果：1,234,567

8、对象排序：

1
2
3

$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]
{{arr | orderBy:'id':true }}//根id降序排
{{arr | orderBy:'id' }}//根据id升序排

自定义filter方法

我们来自定义选择省份和职位

HTML代码：
{{1 | provinceFilter}}
{{6 | fMes:'positionList':'type'}}

app.js:
angular.module('myApp',[])
//数组
.controller('personCtrl',function($scope){
  $scope.arr=[
    {"age":20,"id":10,"name":"iphone"},
    {"age":12,"id":11,"name":"sunm xing"},
    {"age":44,"id":12,"name":"test abc"}
    ]
  }
)
//自定义选择省份
.filter('provinceFilter',function(PROVINCE){//省
  return function(id){
    if(id!=undefined&&id!=''){
      var  name;
      angular.forEach(PROVINCE,function(data){
        if(data.ProID==id){
              name=data.ProName;
          }
      });
  return  name;
    }
  }
})

//自定义选择职位

.filter('fMes',function(con){
  return function(input,field,str){
  if(input>=0) {//input != undefined &&
    var name;
    var aMes=con[field];
    angular.forEach(aMes,function(data){
      if(data[str]==input){
          name=data.name;
      }
    });
    return name;
    }else{console.log('false');}
  }
});

constant.js
angular.module("myApp") .value('val',{
})
//公司编辑常量组
.constant('con',{
//职业分类
positionList:[
  {type:0,name:'ui设计师'},
  {type:1,name:'运维工程师'},
  {type:2,name:'产品'},
  {type:3,name:'Java工程师'},
  {type:4,name:'IOS工程师'},
  {type:5,name:'Android工程师'},
  {type:6,name:'Web前端工程师'}
]
})

显示的结果是：Web前端工程师，改变type值，显示相应的职位。

拓展思考

AngularJS的内置过滤器有哪些？

参考文献

参考一：angularJS constant和value
参考二：AngularJS的Filter用法详解