AngularJS基於MVC的複雜操作案例 ...
AngularJS基於MVC的複雜操作案例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>AngularJS基於MVC的複雜操作案例</title> 6 <script type="text/javascript" src="../js/angular.min.js"></script> 7 </head> 8 <body> 9 <!--ng-app="myapp"定義了一個模塊--> 10 <div ng-app="myapp" ng-controller="myctrl"> 11 <div> 12 <!--ng-model模型作用--> 13 <input type="text" name="name" ng-model="name" /> 14 <!--提供按鈕--> 15 <input type="button" value="清空" ng-click="clearVal()" /> 16 </div> 17 <div> 18 <!--{{}}等價於ng-bind用於數據顯示--> 19 hello,{{name}} 20 </div> 21 </div> 22 </body> 23 <script type="text/javascript"> 24 //初始化myapp模塊 25 var myapp = angular.module("myapp",[]); 26 //定義模塊的控制器 27 //依賴註入，$scope作用域對象，操作當前作用域視圖 28 myapp.controller("myctrl",["$scope",function($scope){ 29 //對模型進行初始化賦值 30 $scope.name = "你我他學習吧"; 31 //在作用域提供clearVal點擊事件 32 $scope.clearVal = function(){ 33 //模型設置為空 34 $scope.name = "";//清空輸入框內容 35 } 36 }]); 37 </script> 38 </html>
