AngularJS表单基本操作


Posted in Javascript onJanuary 09, 2017

本文实例为大家分享了AngularJS表单简单操作代码,供大家参考,具体内容如下

HTML正文:

<div ng-app="myApp" ng-controller="myCtrl">
 <!-- novalidate:当提交表单时不对表单数据(输入)进行验证 -->
 <form novalidate>
  First Name:<input type="text" ng-model="user.firstName"><br>
  Last Name:<input type="text" ng-model="user.lastName">
  <br><br>
  <button ng-click="reset()">RESET</button>
 </form>
 <p>form = {{user }}</p>
 <p><font color="red">initInfo = {{initInfo}}</font></p>
</div>

Javascript操作代码:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.initInfo = {firstName:"squirrel", lastName:"Python"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.initInfo); // user对象等于master对象:深复制
  };
  //JS扫描脚本时会自动调用reset方法进行输入框信息的初始化
  $scope.reset();
});

效果:

AngularJS表单基本操作

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
js动态为代码着色显示行号
May 29 Javascript
javascript数据类型验证方法
Dec 31 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
AngularJS Controller作用域
Jan 09 #Javascript
详解JavaScript树结构
Jan 09 #Javascript
angular分页指令操作
Jan 09 #Javascript
jquery.zclip轻量级复制失效问题
Jan 08 #Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 #Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 #Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 #Javascript
You might like
PHP爆绝对路径方法收集整理
2012/09/17 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
smarty表格换行实例
2014/12/15 PHP
php查询及多条件查询
2017/02/26 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
成龙洗发水广告词
2014/03/14 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
幼儿老师求职信
2014/06/30 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
鲁冰花观后感
2015/06/10 职场文书
Python实现天气查询软件
2021/06/07 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang