Home > Developer > Web Develop
<!DOCTYPE HTML5><HTML> <Head> <title>Angularjs's practice</title> <MetaCharSet= "UTF-8"/> </Head> <BodyNg-app= "MyModule1"> <H1>Use of filters in ANGULARJS---used in HTML templates</H1> <H3>Number Filter</H3> <Div> <label for= "Myinput">This is the input box:</label><inputNg-model= "Unum"ID= "Myinput"/> <P>Only the numbers that are entered will be displayed after the</P> <ul> <Li>Default 3 decimal places: {{unum | number}}</Li> <Li>Specify 2 decimal places: {{unum | number:2}}</Li> <Li>Specify 4 decimal places: {{unum | number:4}}</Li> </ul> </Div> <HR/> <H3>Currency Filter---Currency</H3> <Div> <label for= "Myinput">This is the input box:</label><inputNg-model= "Money"ID= "Myinput"/> <P>You can put a currency symbol in front of the number entered</P> <ul> <Li>Default currency symbol: {{money | currency}}</Li> <Li>RMB symbol: {{money | currency: ' ￥ '}}</Li> <Li>Any symbol: {{money | currency: '%$%^# '}}</Li> </ul> </Div> <HR/> <H3>Date Filter--date</H3> <Div> <label for= "Myinput">This is the input box:</label><inputNg-model= "MyDate"ID= "Myinput"/> <P>You can specify the display format of a date---here converts the number of milliseconds from the computer to a date</P> <ul> <Li>Default date format: {{mydate | date}}</Li> <Li>Year-month-day: {{mydate | date: ' YYYY-MM-DD '}}</Li> <Li>Year-month-day time: minutes: seconds: {{mydate | date: ' YYYY-MM-DD HH:mm:ss '}}</Li> </ul> </Div> <HR/> <H3>Uppercase (uppercase), lowercase (lowercase) filters</H3> <Div> <label for= "Myinput">This is the input box:</label><inputNg-model= "Myletter"ID= "Myinput"/> <P>Letter-Case Conversions</P> <ul> <Li>Capitalize: {{myletter | uppercase}}</Li> <Li>Convert to lowercase: {{myletter | lowercase}}</Li> </ul> </Div> <HR/> <H3>Width-limited Filter--limitto</H3> <Div> <label for= "Myinput">This is the input box:</label><inputNg-model= "Mywith"ID= "Myinput"/> <P>Will limit the width</P> <ul> <Li>Limit to 10 characters: {{mywith | limitto:10}}</Li> </ul> </Div> <HR/> <H3>JSON filter-Converts a JS object to a JSON string</H3> <Div> <P>Here is my JS object:</P> <Pre>var person={uname: ' Tom ', age:23,istall:true}; </Pre> <P>This is a JSON string: {{{uname: ' Tom ', age:23,istall:true} | json}}</P> </Div> <P>There are also two filters (----, filter) to be continued .....</P> <Scriptsrc= "Js/angular.js"></Script> <Scriptsrc= "Js/4.js"></Script> </Body></HTML>
Corresponding JS:
Angular.module (' MyModule1 ', []);ANGULARJS Study Notes (ii)----------about filters
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
