Home > Developer > Web Develop
In the example of the previous section, $scope we did not create this object, the direct binding can get inside the object, this style follows a design pattern called Dimitri Law.
Then angular also has a very powerful function called "instruction".
You can. Templates are written in HTML form, and there are some things that are not part of the HTML specification, such as the Ng-controller introduced. Ng-model, let's look at a similar shopping cart example:
1 <HTMLng-app= ' My-app '>2 <Head>3 <Tiltle>My Shopping Cart</title> 4 </Head>5 <BodyNg-controller= ' Cartcontroller '>6 <H1>My order</H1>7 <Div ng-repeat= ' Item in items ' >8 <span>{{Item.title}}</span>9 <inputNg-model= ' item.quantity '>Ten <span>{{item.price|currency}}</span> One <span>{{Item.price * item.quantity|currency}}</span> A <ButtonNg-click= "Remove ($index)">Remove</Button> - </Div> - <Scriptsrc= "Angular.js"></Script> the <Script> - functionCarcontroller ($scope) { - $scope. Items=[ - {title:'Paint Pots', Quantity:8, Price:3.33}, + {title:'Pack Pots', Quantity:5, Price:2.33}, - {title:'pedbbles Pots', Quantity3,price: A} + ]; A $scope. Remove=function(index) { at $scope. Items.splice (Index,1); - } - } - </Script> - </Body> - </HTML>
Here are a few explanations of where the first one is ng-app= ' My-app ', which means the entire page is Angular admin page
The second, ng-repeat= ' item in items ' means that each element in the items array copies a copy of the DOM structure of <div>, including the div itself, items have three groups, so there are now three Div
Third, {{item.title}} binds data through {{}} and creates a binding relationship with ng-model= ' item.quantity '
Fourth one,
{{item.price|currency}}
{{Item.price * item.quantity|currency}} Filter
Currency is a currency filter that is built-in and it can be formatted for US dollars.
Fifth one,ng-click= "Remove ($index)"
Delete button, can delete the shopping cart items.
Angularjs Quick Start (ii)
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
