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学习网址备忘
May 29 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
javascript实现控制div颜色
Jul 07 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
js实现常见的工具条效果
Mar 02 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
ant design实现圈选功能
Dec 17 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 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 破解防盗链图片函数
2008/12/09 PHP
php array的学习笔记
2012/05/16 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python 链接和操作 memcache方法
2017/03/04 Python
python读取二进制mnist实例详解
2017/05/31 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
客服服务心得体会
2013/12/30 职场文书
企业诚信承诺书
2014/05/23 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
2015年基建工作总结范文
2015/05/23 职场文书