AngularJS表单编辑提交功能实例

 这篇文章主要介绍了AngularJS表单编辑提交功能实例,本文讲解如何修改表单的默认值,需要的朋友可以参考下

 
 

研究了下高大上的AngularJS决定试试它的表单编辑提交功能,据说比JQuery强的不是一星半点。
好奇呀,试试吧。。。。。搞了好久,尼玛。。。靠。。靠。。靠。。尼玛 。。靠。。靠。。。。好吧,谁让我手欠呢。

模仿着我要搞了个AngularJS Form,但是问题来了。。。。
发现初始化时候ng-model 跟 input 标签里的 value 不默契,冲突。。
后来想再AngularJS controller 里预先赋值 $scope.formData = {‘name':'张三'};
可以通过php程序把值赋到这个AngularJS controller里

 

代码如下:

<!-- AngularJS controller -->
<script>
var formApp = angular.module('formApp', []);
function formController($scope, $http) {
$scope.formData = {'name':'张三','remark':'备注'};
$scope.myForm = function() {
$http({
method : 'POST',
url : '/role/edit',
data : $.param($scope.formData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
console.log(data);
if (!data.success) {
} else {
}
});
};
}
</script>
<!--对应form里的input调整-->
<input type="text" name="name" ng-model="formData.name" class="form-control" placeholder="Role Name">

 

后来又搜啊搜 发现还有其他办法,这么个东东 ng-init=”formData.name='张三'”

 

代码如下:

<input type="text" name="name" ng-model="formData.name" ng-init="formData.name='张三'" value="">

时间: 2025-01-02 02:08:49

AngularJS表单编辑提交功能实例的相关文章

ThinkPHP表单自动提交验证实例教程_php实例

本文以实例讲述了ThinkPHP表单自动提交验证的实现过程,详细步骤如下所示: 一.模板部分: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITL

一个JavaScript防止表单重复提交的实例_javascript技巧

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>防止重复表单提交</title> <style> #refresh{ display: none; width:200px; height:20px; background

一个JavaScript防止表单重复提交的实例

 <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>防止重复表单提交</title>  <style>  #refresh{  display: none;  width:200px;  height:20px; 

AngularJs表单验证实例详解_AngularJS

常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="

AngularJs表单验证实例代码解析_AngularJS

常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

[转自Scott]ASP.NET MVC框架(第四部分): 处理表单编辑和提交场景

英文原文地址:http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-mvc-framework-part-4-handling-form-edit-and-post-scenarios.aspx 翻译原文地址:http://blog.joycode.com/scottgu/archive/2007/12/10/112465.aspx 过去的几个星期内,我一直在写着讨论我们正在开发的新ASP.NET MVC框架的系列贴子.ASP.NET

防止用户将表单重复提交四种方法(实例教程)

表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 禁掉提交按钮. 表单提交后使用Javascript使提交按钮disable.这种方法防止心急的用户多次点击按钮.但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了. 例  代码如下 复制代码 <script type

php 防止表单重复提交两种实现方法_php实例

php 防止表单重复提交 由于网络原因,经常出来点了提交按钮,网页没有反应,而进行再次点击.这样就导致后台收到两次提交,从而进行两次处理,本文章向大家介绍php 防止表单重复提交的几种方法 1.前端解决 方法一: 可以通过前端来解决.当用户点了提交按钮之后,先使用js进行有效性判断,没问题后,将提交按钮"禁用"掉.然后再提交! 方法二: 使用ajax提交表单.点了提交按钮后,禁用提将按钮,或者设置一个状态值,将其设为1,表示正在提交.再提交时判断如果正在提交,则不作处理.等ajax返回

探究Lotus Forms中的事件处理,第一部分: 表单对计算功能的支持

Lotus Forms 通过构建动态的电子表单,收集用户信息并将其传递给其他应用系统,以实现业务流程的管理.与纸质表单相比,电子表单的最大优势之一就是能够动态地响应用户活动.如,根据用户输入动态改变背景颜色,响应鼠标点击事件发送邮件或提交表单,等等.本文将通过若干实例,向您详细讲述 Lotus Forms 中对计算功能的支持.作为复杂事件处理的基础,计算功能允许设计者通过编程实现表单对用户活动的响应. Lotus Forms 概述 Lotus Forms 提供了一种以电子表单的形式收集用户信息并