angularjs 过滤器

简介:
复制代码
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);

m1.filter('firstUpper',function(){//自定义过滤器,firstUpper是过滤器名字。
    return function(str,num){
        console.log(num);
        return str.charAt(0).toUpperCase() + str.substring(1);
    }
});

m1.controller('Aaa',['$scope','$filter ',function($scope,$filter){//$filter是过滤器,
    
    $scope.name = '723894734.7489545';
    $scope.name = 'hello';
    $scope.name = {"name":"hello","age":"20"};
    $scope.name = ['a','b','c'];
    $scope.name = '3748935795';
    
    $scope.name = [
        {color:"red",age:"20"},
        {color:"yellow",age:"30"},
        {color:"blue",age:"40"},
        {color:"green",age:"10"}
    ];
    //$filter过滤器要形参传进来,
    $scope.name = $filter('uppercase')('hello');
    $scope.name = $filter('number')('236478234.3647348',1);//数字格式化,保留一位小数。
    $scope.name = $filter('date')('236478234','hh');//毫秒数格式化为小时
    
    $scope.name = 'hello';
    
    $scope.name = $filter('firstUpper')('hello');//使用自定义过滤器
    
}]);

</script>
</head>

<body>
<div ng-controller="Aaa">
    <p>{{name | currency:""}}</p>  //currency是把数字变成金额的写法, ¥是数字前面加¥
    <p>{{ name | number : 2 }}</p>//number是把数字每3位一个逗号,2表示保留2位小数
    <p>{{ name | uppercase }}</p>
    <pre>{{ name | json }}</pre>  //json格式的name转换为json对象,
    <p>{{ name | limitTo : 2 }}</p>
    <p>{{ name | date : 'yyyy' }}</p>  //对毫秒数的name格式化
    <p>{{ name | orderBy : 'age' : true }}</p>
    <p>{{ name | filter : 'l' }}</p>
    <p>{{ name | limitTo : 2 | uppercase }}</p>
    <p>{{ name | firstUpper : 2 }}</p>  使用自定义过滤器,2是参数num.
    <p>{{ name }}</p>
</div>
</body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5738500.html,如需转载请自行联系原作者

相关文章
|
JSON 网络协议 Dubbo
RPC框架(技术总结)
RPC框架(技术总结)
RPC框架(技术总结)
|
9月前
|
前端开发 开发工具 Android开发
移动应用开发之旅:从新手到专家
在本文中,我们将探索移动应用开发的奇妙世界。无论你是刚刚踏入这个领域的新手,还是已经有一定经验的开发者,本文都将为你提供有价值的见解和指导。我们将从基础概念开始,逐步深入到更复杂的主题,如移动操作系统的选择、开发工具的使用以及如何优化你的应用以获得更好的性能和用户体验。通过阅读本文,你将获得一个全面的视角,了解如何从零开始构建你自己的移动应用,并最终成为一名移动应用开发专家。让我们一起踏上这段激动人心的旅程吧!
231 3
|
7月前
|
人工智能 自然语言处理 搜索推荐
全网首发 | PAI Model Gallery一键部署阶跃星辰Step-Video-T2V、Step-Audio-Chat模型
Step-Video-T2V 是一个最先进的 (SoTA) 文本转视频预训练模型,具有 300 亿个参数,能够生成高达 204 帧的视频;Step-Audio 则是行业内首个产品级的开源语音交互模型,通过结合 130B 参数的大语言模型,语音识别模型与语音合成模型,实现了端到端的文本、语音对话生成,能和用户自然地进行高质量对话。PAI Model Gallery 已支持阶跃星辰最新发布的 Step-Video-T2V 文生视频模型与 Step-Audio-Chat 大语言模型的一键部署,本文将详细介绍具体操作步骤。
|
9月前
|
数据采集 存储 XML
python实战——使用代理IP批量获取手机类电商数据
本文介绍了如何使用代理IP批量获取华为荣耀Magic7 Pro手机在电商网站的商品数据,包括名称、价格、销量和用户评价等。通过Python实现自动化采集,并存储到本地文件中。使用青果网络的代理IP服务,可以提高数据采集的安全性和效率,确保数据的多样性和准确性。文中详细描述了准备工作、API鉴权、代理授权及获取接口的过程,并提供了代码示例,帮助读者快速上手。手机数据来源为京东(item.jd.com),代理IP资源来自青果网络(qg.net)。
|
11月前
|
机器学习/深度学习 数据可视化 数据挖掘
使用Python实现简单的线性回归模型
【10月更文挑战第2天】使用Python实现简单的线性回归模型
178 0
|
算法 安全 网络安全
信息安全: MAC(消息认证码)算法,保护数据完整性和真实性的利器
MAC 算法在保证数据完整性和真实性方面扮演着重要角色。HMAC 和 CMAC 作为两种主要的 MAC 算法,因其高安全性和广泛应用,已经成为现代通信和数据保护中不可或缺的一部分。通过本文的介绍,希望读者能够更好地理解和使用 MAC 算法,保障信息的安全性。
|
供应链 安全 Shell
|
计算机视觉 索引
YOLOv5的Tricks | 【Trick14】YOLOv5的val.py脚本的解析
YOLOv5的Tricks | 【Trick14】YOLOv5的val.py脚本的解析
1674 0
YOLOv5的Tricks | 【Trick14】YOLOv5的val.py脚本的解析
|
存储
使用KD-Tree树查找最近邻点 - 二维
使用KD-Tree树查找最近邻点 - 二维
229 0
|
JavaScript 视频直播
【视频直播篇二】vue-cli3集成LivePlayer
本文着重介绍vue-cli3集成LivePlayer
591 0