Home > Developer > Web Develop
<!DOCTYPE HTML><!--tag Ng-app tells Angularjs to process the entire HTML page and guide the app -<HTMLNg-app> <Head> <MetaCharSet= "UTF-8"> <Scriptsrc= "http://code.angularjs.org/angular-1.0.1.min.js"></Script> <Scriptsrc= "js/controllers.js"></Script> <!--when binding two curly braces on the title element can achieve our goal, but you may find that the page is loading when they are displayed to the user to See. A better solution is to use Ngbind or ngbindtemplate directives, which are not visible to the user when the page is loaded - <titleng-bind-template= "Google Phone Gallery: {{' ha ha '}}">Google Phone Gallery</title> </Head> <BodyNg-controller= "phonelistctrl"> <!--Two-way binding ng-model= "yourname" -Your name:<inputtype= "text"Ng-model= "yourname"placeholder= "world"> <HR>Hello {{yourname | | | ' World '}}! <HR> <!--extracting data from the controller, iterating through the display - <!--Phonelistctrl controller inside the method -Search:<inputNg-model= "query"> <!--the Orderprop here will take out the default orderprop= "age" inside the controller. -Sort by:<SelectNg-model= "orderprop"> <optionvalue= "name">Name Order</option> <optionvalue= "age">Age Order</option> </Select> <ul> <!--variables defined by the Phonelistctrl method in the controller phones iterative ng-repeat iteration elements - <!--the filter function uses the value of query to create a new array that contains only matching query records - <!--Sort by order binding to the Orderprop element above - <Ling-repeat= "phone in phones | filter:query | orderby:orderprop">{{phone.name}}<P>{{phone.snippet}}</P> </Li> <HR> <!--Here are some links - <P>Total number of phones: {{phones.length}}</P> </ul> <HR> <DivNg-controller= "hellowordctrl">Test Controller: {{hello}}</Div> <HR> <Table> <TR><th>Row number</th></TR> <TRng-repeat= "i in [0, 1, 2, 3, 4, 5, 6, 7]"><TD>{{i}}</TD></TR> </Table> </Body></HTML>
Basic element application of Angularjs
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
