exampler working with angular js
A Pen by William Aguirre on CodePen.
Created
March 20, 2015 21:16
-
-
Save ramanan12345/f6bb0a661867adc70149 to your computer and use it in GitHub Desktop.
Angular js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body ng-app> | |
| <form ng-app ng-controller="OrderFormController"> | |
| <h1>Services</h1> | |
| <ul> | |
| <!-- Loop through the services array, assign a click handler, and set or | |
| remove the "active" css class if needed --> | |
| <li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}"> | |
| <!-- Notice the use of the currency filter, it will format the price --> | |
| {{service.name}} <span>{{service.price | currency}}</span> | |
| </li> | |
| </ul> | |
| <div class="total"> | |
| <!-- Calculate the total price of all chosen services. Format it as currency. --> | |
| Total: <span>{{total() | currency}}</span> | |
| </div> | |
| </form> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function OrderFormController($scope){ | |
| // Define the model properties. The view will loop | |
| // through the services array and genreate a li | |
| // element for every one of its items. | |
| $scope.services = [ | |
| { | |
| name: 'Web Development', | |
| price: 300, | |
| active:true | |
| },{ | |
| name: 'Design', | |
| price: 400, | |
| active:false | |
| },{ | |
| name: 'Integration', | |
| price: 250, | |
| active:false | |
| },{ | |
| name: 'Training', | |
| price: 220, | |
| active:false | |
| } | |
| ]; | |
| $scope.toggleActive = function(s){ | |
| s.active = !s.active; | |
| }; | |
| // Helper method for calculating the total price | |
| $scope.total = function(){ | |
| var total = 0; | |
| // Use the angular forEach helper method to | |
| // loop through the services array: | |
| angular.forEach($scope.services, function(s){ | |
| if (s.active){ | |
| total+= s.price; | |
| } | |
| }); | |
| return total; | |
| }; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| body{ | |
| font:15px/1.3 'Open Sans', sans-serif; | |
| color: #5e5b64; | |
| text-align:center; | |
| } | |
| a, a:visited { | |
| outline:none; | |
| color:#389dc1; | |
| } | |
| a:hover{ | |
| text-decoration:none; | |
| } | |
| section, footer, header, aside, nav{ | |
| display: block; | |
| } | |
| /*------------------------- | |
| The order form | |
| --------------------------*/ | |
| form{ | |
| background-color: #61a1bc; | |
| border-radius: 2px; | |
| box-shadow: 0 1px 1px #ccc; | |
| width: 400px; | |
| padding: 35px 60px; | |
| margin: 50px auto; | |
| } | |
| form h1{ | |
| color:#fff; | |
| font-size:64px; | |
| font-family:'Cookie', cursive; | |
| font-weight: normal; | |
| line-height:1; | |
| text-shadow:0 3px 0 rgba(0,0,0,0.1); | |
| } | |
| form ul{ | |
| list-style:none; | |
| color:#fff; | |
| font-size:20px; | |
| font-weight:bold; | |
| text-align: left; | |
| margin:20px 0 15px; | |
| } | |
| form ul li{ | |
| padding:20px 30px; | |
| background-color:#e35885; | |
| margin-bottom:8px; | |
| box-shadow:0 1px 1px rgba(0,0,0,0.1); | |
| cursor:pointer; | |
| } | |
| form ul li span{ | |
| float:right; | |
| } | |
| form ul li.active{ | |
| background-color:#8ec16d; | |
| } | |
| div.total{ | |
| border-top:1px solid rgba(255,255,255,0.5); | |
| padding:15px 30px; | |
| font-size:20px; | |
| font-weight:bold; | |
| text-align: left; | |
| color:#fff; | |
| } | |
| div.total span{ | |
| float:right; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment