欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

AngularJS基于MVC的复杂操作实例讲解

时间:2021-07-11 08:41:28|栏目:AngularJS|点击:

实例如下:

<!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>

上一篇:Angular4 中内置指令的基本用法

栏    目:AngularJS

下一篇:AngularJs Understanding Angular Templates

本文标题:AngularJS基于MVC的复杂操作实例讲解

本文地址:http://www.codeinn.net/misctech/155659.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有