實例如下:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>AngularJS基于MVC的復雜操作案例</title> <script type="text/javascript" src="../js/angular.min.js"></script> </head> <body> <!--ng-app="myapp"定義了一個模塊--> <div ng-app="myapp" ng-controller="myctrl"> <div> <!--ng-model模型作用--> <input type="text" name="name" ng-model="name" /> <!--提供按鈕--> <input type="button" value="清空" ng-click="clearVal()" /> </div> <div> <!--{{}}等價于ng-bind用于數據顯示--> hello,{{name}} </div> </div> </body> <script type="text/javascript"> //初始化myapp模塊 var myapp = angular.module("myapp",[]); //定義模塊的控制器 //依賴注入,$scope作用域對象,操作當前作用域視圖 myapp.controller("myctrl",["$scope",function($scope){ //對模型進行初始化賦值 $scope.name = "你我他學習吧"; //在作用域提供clearVal點擊事件 $scope.clearVal = function(){ //模型設置為空 $scope.name = "";//清空輸入框內容 } }]); </script></html>以上這篇AngularJS基于MVC的復雜操作實例講解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答