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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
javascript读写json示例
Apr 11 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
PHP调用三种数据库的方法(3)
2006/10/09 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Python运算符重载用法实例
2015/05/28 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
中文系师范生自荐信
2013/10/01 职场文书
生物科学专业个人求职信范文
2013/12/05 职场文书
九年级物理教学反思
2014/01/29 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
个人合伙协议书范本
2014/10/14 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
趵突泉导游词
2015/02/03 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
总结几个非常实用的Python库
2021/06/26 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python