AngularJS表单基本操作  更新时间:2017年01月09日 09:01:02   作者:Zerone1993   这篇文章主要为大家详细介绍了AngularJS表单基本操作的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了AngularJS表单简单操作代码,供大家参考,具体内容如下 HTML正文: First Name: Last Name: RESET form = {{user }} initInfo = {{initInfo}} 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模仿Form表单提交的实现代码 详细分析使用AngularJS编程中提交表单的方式 AngularJS表单编辑提交功能实例 angularJS提交表单(form) AngularJs表单校验功能实例代码 AngularJS实现表单验证功能 AngularJS中实现用户访问的身份认证和表单验证功能 AngularJS 使用 UI Router 实现表单向导 AngularJS使用ngMessages进行表单验证 AngularJS实现表单验证 AngularJS表单提交实例详解 AngularJS 表单 相关文章 AngularJS监听ng-repeat渲染完成的两种方法 这篇文章主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下 2018-01-01 AngularJS基础知识笔记之表格 这篇文章主要介绍了AngularJS基础知识笔记之表格的相关资料,需要的朋友可以参考下 2015-05-05 实例详解angularjs和ajax的结合使用 本篇文章给大家介绍angularjs和ajax的结合使用,本文介绍的非常详细,对angularjs和ajax感兴趣的朋友一起参考下吧 2015-10-10 对angularJs中controller控制器scope父子集作用域的实例讲解 今天小编就为大家分享一篇对angularJs中controller控制器scope父子集作用域的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angularjs过滤器使用详解 AngularJS提供了过滤器来对输入输出数据格式化。这篇文章主要介绍了Angularjs过滤器使用的相关资料,需要的朋友可以参考下 2016-05-05 AngularJS实现表单验证功能 这篇文章主要为大家详细介绍了AngularJS实现表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-01-01 AngularJS自定义表单验证功能实例详解 这篇文章主要介绍了AngularJS自定义表单验证功能,结合完整实例形式详细分析了AngularJS实现表单验证的相关指令、模型绑定、数据验证等操作技巧,需要的朋友可以参考下 2018-08-08 AngularJS 过滤器(自带和自建)详解 这篇文章主要介绍了AngularJS 过滤器(自带和自建)详解的相关资料,需要的朋友可以参考下 2016-09-09 angularJs 表格添加删除修改查询方法 下面小编就为大家分享一篇angularJs 表格添加删除修改查询方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 AngularJS基础学习笔记之简单介绍 AngularJS 不仅仅是一个类库,而是提供了一个完整的框架。它避免了您和多个类库交互,需要熟悉多套接口的繁琐工作。它由Google Chrome的开发人员设计,引领着下一代Web应用开发。也许我们5年或10年后不会使用AngularJS,但是它的设计精髓将会一直被沿用。 2015-05-05 最新评论

本文实例为大家分享了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模仿Form表单提交的实现代码
  • 详细分析使用AngularJS编程中提交表单的方式
  • AngularJS表单编辑提交功能实例
  • angularJS提交表单(form)
  • AngularJs表单校验功能实例代码
  • AngularJS实现表单验证功能
  • AngularJS中实现用户访问的身份认证和表单验证功能
  • AngularJS 使用 UI Router 实现表单向导
  • AngularJS使用ngMessages进行表单验证
  • AngularJS实现表单验证
  • AngularJS表单提交实例详解
张贴在3