首页 > 代码库 > First AngularJS !
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></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); }}
First AngularJS !
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。