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 Accessor实现说明
Dec 06 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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/01/10 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP简单遍历对象示例
2016/09/28 PHP
JS 实现图片直接下载示例代码
2013/07/22 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
js实现简单的验证码
2015/12/25 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python性能测试工具locust的使用
2020/12/28 Python
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
关于元旦的广播稿
2014/02/16 职场文书
老人祝寿主持词
2014/03/28 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
法制演讲稿
2014/09/10 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL