AngularJS基于MVC復(fù)雜操作的示例分析

發(fā)布時(shí)間：2021-08-26 11:22:06 來(lái)源：億速云閱讀：76 作者：小新欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)AngularJS基于MVC復(fù)雜操作的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

實(shí)例如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>AngularJS基于MVC的復(fù)雜操作案例</title>
  <script type="text/javascript" src="../js/angular.min.js"></script>
 </head>
 <body>
  <!--ng-app="myapp"定義了一個(gè)模塊-->
  <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>
    <!--{{}}等價(jià)于ng-bind用于數(shù)據(jù)顯示-->
    hello,{{name}}
   </div>
  </div>
 </body>
 <script type="text/javascript">
  //初始化myapp模塊
  var myapp = angular.module("myapp",[]);
  //定義模塊的控制器
  //依賴注入，$scope作用域?qū)ο?，操作?dāng)前作用域視圖
  myapp.controller("myctrl",["$scope",function($scope){
   //對(duì)模型進(jìn)行初始化賦值
   $scope.name = "你我他學(xué)習(xí)吧";
   //在作用域提供clearVal點(diǎn)擊事件
   $scope.clearVal = function(){
    //模型設(shè)置為空
    $scope.name = "";//清空輸入框內(nèi)容
   }
  }]);
 </script>
</html>

感謝各位的閱讀！關(guān)于“AngularJS基于MVC復(fù)雜操作的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

AngularJS基于MVC復(fù)雜操作的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽