Home > Developer > Web Develop
My First angular!
<HTMLNg-app><Head> <MetaCharSet= "Utf-8"> <Scriptsrc= "Angular.js"></Script> <Scriptsrc= "Controllers.js"></Script> <style>. Selected{Background-color:LightGreen; } </style></Head><Body> <DivNg-controller= ' Hellocontroller '> <inputNg-model= ' Greeting.Text '/> <P>{{Greeting.Text}}, World</P> </Div> <DivNg-controller= "Cartcontroller"> <Divng-repeat= ' ItemIn items '> <span>{{Item.title}}</span> <inputNg-model= ' item.quantity '> <span>{{item.price | currency}}</span> <span>{{Item.price * item.quantity | currency}}</span> <ButtonNg-click= "Remove ($index)">Remove</Button> </Div> </Div> <formNg-controller= "Fundingcontroller">Starting:<inputNg-change= "computeneeded ()"Ng-model= "Funding.startingestimate">Recommendation: {{needed}}<inputNg-model= "Funding.me"> </form>Ng-change Ng-submit is like an event handler function<formNg-submit= "requestfunding ()"Ng-controller= "Startupcontroller">Starting:<inputNg-change= "computeneeded ()"Ng-model= "Startingestimate">Recommendation: {{needed}}<Button>Fund my startup!</Button> <ButtonNg-click= "Reset ()">Reset</Button> </form> <DivNg-controller= ' Deathraymenucontroller '> <ButtonNg-click= ' Togglemenu () '>Toggle Menu</Button> <ulNg-show= ' Menustate.show '> <LiNg-click= ' stun () '>Stun</Li> <LiNg-click= ' disintegrate () '>Disintegrate</Li> <LiNg-click= ' erase () '>Erase from the history</Li> </ul> <Div/>Ng-showw is false equivalent to display none<TableNg-controller= ' Restauranttablecontroller '> <TRng-repeat= ' RestaurantIn directory ' Ng-click= ' selectrestaurant ($index) 'Ng-class= ' {selected:$index==selectedrow} '> <TD>{{Restaurant.name}}</TD> <TD>{{Restaurant.cuisine}}</TD> </TR></Table></Body></HTML>
Js
functionHellocontroller ($scope) {$scope. Greeting={text:' Hello ' }; Console.log ($scope. greeting.text);}functionCartcontroller ($scope) {$scope. Items=[{title:' Paint pots ', Quantity:8, Price:3.95}, {title:' Polka dots ', Quantity:17, Price:12.95}, {title:' Pebbles ', Quantity:5, Price:6.95 }]; $scope. Remove=function(index) {$scope. Items.splice (Index,1); }}functionFundingcontroller ($scope) {$scope. Funding={startingestimate:0 }; $scope. computeneeded=function() {$scope. Needed= $scope. Funding.startingestimate * 10; }; Computeme=function() {Console.log (' Me Change '); } $scope. $watch (' Funding.me ', Computeme);}functionStartupcontroller ($scope) {$scope. computeneeded=function() {$scope. Needed= $scope. Startingestimate * 10; }; $scope. requestfunding=function() {Window.alert ("Sorry, please get more customers first." +$scope. needed); }; $scope. Reset=function() {$scope. Needed= $scope. Startingestimate =0; Alert ($scope. startingestimate); }}functionDeathraymenucontroller ($scope) {//$scope. menustate.show = false;//This direct write will error prompt $scope.menustate undefined //can do this //$scope. menustate = {}; //$scope. menustate.show = false; //but this is the best way to do it.$scope. menustate ={show:false }; $scope. Togglemenu=function() {$scope. Menustate.show= !$scope. menustate.show; };}functionRestauranttablecontroller ($scope) {$scope. Directory= [{name: "The handsome Heifer", cuisine: "BBQ"},{name: "Green's green Greens", cuisine: "Salads"},{name: "House of Fine Fish ", Cuisine:" Seafood "}]; $scope. Selectrestaurant=function($selecteIndex) {$scope. Selectedrow=$selecteIndex; Console.log ($selecteIndex); }}
First 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
