过滤器
过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时提供了方便的途径可以自己创建过滤器。
- 使用方法
在HTML中的模板绑定符号{{ }}内通过|来调用过滤器。
代码示例：
//将字符串转化为大写
<div>
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name|uppercase}}</h1>
</div>
效果：
image.png
AngularJS内置过滤器
currency
将数值格式化为货币格式。
data
将日期化为需要的格式。为制定使用格式时，默认medium格式。
取当前时间来使用这些格式，当前时间为2017/9/27,15:12。
代码示例1：
<body>
<div ng-app="myApp">
<div ng-controller="MyController">
<h4>日期：</h4>
<h5>{{date | date:'medium'}}</h5>
<h5>{{date | date:'short'}}</h5>
<h5>{{date | date:'fullDate'}}</h5>
<h5>{{date | date:'longDate'}}</h5>
<h5>{{date | date:'mediumDate'}}</h5>
<h5>{{date | date:'shortDate'}}</h5>
<h5>{{date | date:'mediumTime'}}</h5>
<h5>{{date | date:'shortTime'}}</h5>
<h4>年份：</h4>
<h5>{{year | date:'yyyy'}}</h5>
<h5>{{year | date:'yy'}}</h5>
<h5>{{year | date:'y'}}</h5>
<h4>月份：</h4>
<h5>{{month | date:'MMMM'}}</h5>
<h5>{{month | date:'MMM'}}</h5>
<h5>{{month | date:'MM'}}</h5>
<h5>{{month | date:'M'}}</h5>
<h4>日期：</h4>
<h5>{{day | date:'dd'}}</h5>
<h5>{{day | date:'d'}}</h5>
<h5>{{day | date:'EEEE'}}</h5>
<h5>{{day | date:'EEE'}}</h5>
</div>
</div>
</body>
<script>
angular.module('myApp',[]).controller('MyController',
function($scope){
var now = new Date();//获取当前系统时间
$scope.date = now;
$scope.year = now;
$scope.month = now;
$scope.day = now;
}
)
</script>
效果：
image.png
代码示例2：
<body>
<div ng-app="myApp">
<div ng-controller="MyController">
<h4>小时：</h4>
<h5>{{hour | date:'HH'}}</h5>
<h5>{{hour | date:'H'}}</h5>
<h5>{{hour | date:'hh'}}</h5>
<h5>{{hour | date:'h'}}</h5>
<h4>分钟</h4>
<h5>{{mimute | date:'mm'}}</h5>
<h5>{{mimute | date:'m'}}</h5>
<h4>秒数：</h4>
<h5>{{second | date:'ss'}}</h5>
<h5>{{second | date:'s'}}</h5>
<h5>{{second | date:'sss'}}</h5>
<h4>字符：</h4>
<h5>{{character | date:'a'}}</h5>
<h5>{{character | date:'Z'}}</h5>
<h4>自定义示例：</h4>
<h5>{{tody | date:'MMMd,y'}}</h5>
</div>
</div>
</body>
<script>
angular.module('myApp',[]).controller('MyController',
function($scope){
var now = new Date();//获取当前系统时间
$scope.hour = now;
$scope.mimute = now;
$scope.second = now;
$scope.character = now;
$scope.tody = now;
}
)
</script>
效果：
image.png
json
将一个JSON或者JavaScript对象转换成字符串。
limitTo
根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。
lowercase
将字符串转为小写。
uppercase
将字符串转为大写。
number
将字符串转为文本。它的第二个参数是可选的，用来控制小数点后截取的位数。
使用方法：{{12334.2222 | number:2}}
orderBy
可以用表达式对指定的数组进行排序。
自定义过滤器
使用filter自定义过滤器，代码示例：
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓名: {{ msg | reverse }}</h1>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");//split()：把字符串分割成为一个字符串数组；reverse()：颠倒数组中元素顺序；join("")：将数组中所有元素组合成一个字符串
}
});
</script>
效果：
image.png
网友评论