<!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',[]);