First AngularJS !
My first angular!
<html ng-app> <head> <meta charset="utf-8"> <script src="angular.js"></script> <script src="controllers.js"></script> <style> .selected { background-color: lightgreen; } </style> </head> <body> <div ng-controller='HelloController'> <input ng-model='greeting.text' /> <p>{{greeting.text}}, World</p> </div> <div ng-controller="CartController"> <div ng-repeat='item in items'> <span>{{item.title}}</span> <input ng-model='item.quantity'> <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> <button ng-click="remove($index)">Remove</button> </div> </div> <form ng-controller="fundingController"> Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"> Recommendation: {{needed}} <input ng-model="funding.me"> </form> ng-change ng-submit 就像事件处理函数一样 <form ng-submit="requestFunding()" ng-controller="StartUpController"> Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">Recommendation: {{needed}} <button>Fund my startup!</button> <button ng-click="reset()">Reset</button> </form> <div ng-controller='DeathrayMenuController'> <button ng-click='toggleMenu()'>Toggle Menu</button> <ul ng-show='menuState.show'> <li ng-click='stun()'>Stun</li> <li ng-click='disintegrate()'>Disintegrate</li> <li ng-click='erase()'>Erase from history</li> </ul> </div> ng-showW为false相当于display none <table ng-controller='RestaurantTableController'> <tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'> <td>{{restaurant.name}}</td> <td>{{restaurant.cuisine}}</td> </tr> </table> watch的使用 <div ng-controller="CartControllerWatch"> <input ng-model="vip"> <div ng-repeat="item in items"> <span>{{item.title}}</span> <input ng-model="item.quantity"> <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> </div> <div>Total: {{totalCart | currency}}</div> <div>Discount: {{bill.discount | currency}}</div> <div>Subtotal: {{subtotal | currency}}</div> </div> </body> </html>
JS
function HelloController($scope) { $scope.greeting = { text: 'Hello' }; console.log($scope.greeting.text); } function CartController($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); } } function fundingController($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); } function StartUpController($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); } } function DeathrayMenuController($scope) { //$scope.menuState.show = false;//这样直接写会报错 提示$scope.menuState undefined //可以这样 //$scope.menuState = {}; //$scope.menuState.show = false; //不过最好还是用这样的方式 $scope.menuState ={ show: false }; $scope.toggleMenu = function() { $scope.menuState.show = !$scope.menuState.show; }; } function RestaurantTableController($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); } } function CartControllerWatch($scope){ function checkVip(){ console.log($scope.vip); } $scope.returnVip = function (){ return $scope.vip; } $scope.$watch('vip',checkVip);//表示监听$scope.vip这个变量 写为$scope.vip检测不到变化的 //或者可以这样写 $scope.$watch($scope.returnVip,checkVip); $scope.bill = { discount : 0 }; $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} ]; function calc(newValue,oldValue,scope){ var total = 0; for(var i = 0, len=$scope.items.length; i < len; i++ ){ total = total + $scope.items[i].price * $scope.items[i].quantity; } $scope.totalCart = total; $scope.bill.discount = total > 100 ? 10 : 0; $scope.subtotal = total - $scope.bill.discount; } //写为$scope.items watch不到变化 $scope.$watch('items' ,calc,true); } var shoppingModule = angular.module('ShoppingModule', []); shoppingModule.factory('Items', function() { var items = {}; items.query = function() { // 在真实的应用中,我们会从服务端拉取这块数据 ... console.log('service'); return [ { title: 'Paint pots', description: 'Pots full of paint', price: 3.95 }, { title: 'Polka dots', description: 'Dots with polka', price: 2.95 }, { title: 'Pebbles', description: 'Just little rocks', price: 6.95 } ]; }; return items; }); function ShoppingController($scope, Items) { //console.log(Items.query()); $scope.items = Items.query(); }
