AngularJs学习之路（五）

来源：互联网发布：化妆品淘宝店铺名字编辑：程序博客网时间：2024/05/16 03:49

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

过滤器描述currency格式化数字为货币格式。filter从数组项中选择一个子集。lowercase格式化字符串为小写。orderBy根据某个表达式排列数组。uppercase格式化字符串为大写。DEMO1

<div ng-app="myApp" ng-controller="personCtrl"><p>姓名为 {{ lastName | uppercase }}</p></div>

DEMO2

<div ng-app="myApp" ng-controller="costCtrl"><input type="number" ng-model="quantity"><input type="number" ng-model="price"><p>总价 = {{ (quantity * price) | currency }}</p></div>

自定义过滤器

以下实例自定义一个过滤器 reverse，将字符串反转：

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("");    }});

自定义过滤器DEMO

<!DOCTYPE html><html><meta charset="utf-8"><script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script><body><div ng-app="myApp" ng-controller="myCtrl">姓名: {{ msg | reverse }}</div><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("");    }});</script></body></html>

阅读全文

0 0