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与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
jquery实现保存已选用户
Jul 21 Javascript
javascript模拟命名空间
Apr 17 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 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制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
原生js实现贪吃蛇游戏
2020/10/26 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
初二生物教学反思
2014/02/03 职场文书
中专自我鉴定
2014/02/05 职场文书
分层教学实施方案
2014/03/19 职场文书
实习单位指导教师评语
2014/12/30 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
今日说法观后感
2015/06/08 职场文书
家访教师心得体会
2016/01/23 职场文书