<!DOCTYPE html5>
<html>
<head>
<title>AngularJs的练习</title>
<meta charset="UTF-8"/>
</head>
<body ng-app="myModule1">
<h1>AngularJs中过滤器的使用---在HTML模板中使用</h1>
<h3>number过滤器</h3>
<div>
<label for="myInput">这是输入框：</label><input ng-model="unum" id="myInput"/>
<p>只有输入的是数字后面才会显示</p>
<ul>
<li>默认3位小数：{{ unum | number}}</li>
<li>指定2位小数：{{ unum | number : 2}}</li>
<li>指定4位小数：{{ unum | number : 4}}</li>
</ul>
</div>
<hr/>
<h3>货币过滤器---currency</h3>
<div>
<label for="myInput">这是输入框：</label><input ng-model="money" id="myInput"/>
<p>可以给输入的数字前面加货币符号</p>
<ul>
<li>默认货币符号：{{ money | currency}}</li>
<li>RMB符号：{{ money | currency : ‘￥‘}}</li>
<li>任意符号：{{ money | currency : ‘%$%^#‘}}</li>
</ul>
</div>
<hr/>
<h3>日期过滤器--date</h3>
<div>
<label for="myInput">这是输入框：</label><input ng-model="myDate" id="myInput"/>
<p>可以指定日期的显示格式---此处将离计算机元年的毫秒数转换为日期</p>
<ul>
<li>默认日期格式：{{ myDate | date}}</li>
<li>年-月-日：{{ myDate | date : ‘yyyy-MM-dd‘}}</li>
<li>年-月-日 时：分：秒：{{ myDate | date : ‘yyyy-MM-dd HH:mm:ss‘}}</li>
</ul>
</div>
<hr/>
<h3>大写(uppercase)、小写(lowercase)过滤器</h3>
<div>
<label for="myInput">这是输入框：</label><input ng-model="myLetter" id="myInput"/>
<p>字母大小写的转换</p>
<ul>
<li>转为大写：{{ myLetter | uppercase }}</li>
<li>转为小写：{{ myLetter | lowercase }}</li>
</ul>
</div>
<hr/>
<h3>宽度限定过滤器--limitTo</h3>
<div>
<label for="myInput">这是输入框：</label><input ng-model="myWith" id="myInput"/>
<p>会限制宽度</p>
<ul>
<li>限制为10个字符：{{ myWith | limitTo : 10 }}</li>
</ul>
</div>
<hr/>
<h3>json过滤器--将js对象转换为json字符串</h3>
<div>
<p>下面是我的js对象：</p>
<pre>
var person={uname:‘Tom‘,age:23,isTall:true};
</pre>
<p>这是json字符串：{{ {uname:‘Tom‘,age:23,isTall:true} | json }}</p>
</div>
<p>还有两个过滤器(orderBy、filter)----待续。。。。。</p>
<script src="js/angular.js"></script>
<script src="js/4.js"></script>
</body>
</html>
对应js:
angular.module(‘myModule1‘,[]);
时间： 2024-08-05 10:57:48