编程 Javascript

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

Posted in Javascript onDecember 31, 2017

实例如下：

<!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的复杂操作实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

你我他学习吧

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript中暂停功能的实现代码

Mar 04 Javascript

javascript面向对象编程(一) 实例代码

Jun 25 Javascript

javascript中的数字与字符串相加实例分析

Aug 14 Javascript

jquery左右全屏大尺寸多图滑动效果代码分享

Aug 28 Javascript

深入浅析knockout源码分析之订阅

Jul 12 Javascript

详解JS对象封装的常用方式

Dec 30 Javascript

jQuery的ajax中使用FormData实现页面无刷新上传功能

Jan 16 Javascript

微信小程序动态的设置图片的高度和宽度详解及实例代码

Feb 24 Javascript

在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)

May 02 Javascript

vue自定义全局组件(自定义插件)的用法

Jan 30 Javascript

Vue和React有哪些区别

Sep 12 Javascript

vue将文件/图片批量打包下载zip的教程

Oct 21 Javascript

jQuery实现页码跳转式动态数据分页

Dec 31 #jQuery

React数据传递之组件内部通信的方法

Dec 31 #Javascript

javascript 通过键名获取键盘的keyCode方法

Dec 31 #Javascript

vue vuex vue-rouert后台项目——权限路由（适合初学）

Dec 29 #Javascript

Angular实现的内置过滤器orderBy排序与模糊查询功能示例

Dec 29 #Javascript

Angular实现的敏感文字自动过滤与提示功能示例

Dec 29 #Javascript

Angular实现点击按钮控制隐藏和显示功能示例

Dec 29 #Javascript