AngularJS基于MVC的复杂操作实例讲解
更新时间:2017年12月31日 09:28:12 作者:你我他学习吧
下面小编就为大家分享一篇AngularJS基于MVC的复杂操作实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
实例如下:
<!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的复杂操作实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Angular中使用ng-zorro图标库部分图标不能正常显示问题
这篇文章主要介绍了Angular中使用ng-zorro图标库部分图标不能正常显示问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04Angular 4依赖注入学习教程之ClassProvider的使用(三)
这篇文章主要给大家介绍了关于Angular 4依赖注入之ClassProvider使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular 4具有一定的参考学习价值,需要的朋友可以参考借鉴,下面来一起看看吧。2017-06-06Angular 4.x中表单Reactive Forms详解
这篇文章主要介绍了Angular 4.x中表单Reactive Forms的相关资料,文中通过示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。2017-04-04使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧2021-07-07
最新评论