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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
js 作用域和变量详解
Feb 16 Javascript
简单的网页广告特效实例
Aug 19 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
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数组去重的函数代码
2013/02/03 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
requireJS使用指南
2016/04/27 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
python中尾递归用法实例详解
2015/04/28 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python实现的config文件读写功能示例
2019/09/24 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
python实现最短路径的实例方法
2020/07/19 Python
如何编写python的daemon程序
2021/01/07 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
企业内部培训方案
2014/02/04 职场文书
产品开发计划书
2014/04/27 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2014年图书室工作总结
2014/12/09 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
小学思品教学反思
2016/02/20 职场文书
安全生产协议书
2016/03/22 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫