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 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
vue实现商城购物车功能
Nov 27 Javascript
gulp构建小程序的方法步骤
May 31 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危险函数(disable_functions)
2012/02/23 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
Yii快速入门经典教程
2015/12/28 PHP
Symfony生成二维码的方法
2016/02/04 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
全面理解闭包机制
2016/07/11 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
经典c++面试题六
2012/01/18 面试题
初三家长会邀请函
2014/01/18 职场文书
探亲邀请信范文
2014/01/30 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
查摆剖析材料范文
2014/09/30 职场文书
小人国观后感
2015/06/11 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Python采集股票数据并制作可视化柱状图
2022/04/04 Python