AngularJS表单编辑提交功能实例
转载 &更新时间：日 11:49:43 & 投稿：junjie
这篇文章主要介绍了AngularJS表单编辑提交功能实例,本文讲解如何修改表单的默认值,需要的朋友可以参考下
研究了下高大上的AngularJS决定试试它的表单编辑提交功能，据说比JQuery强的不是一星半点。
好奇呀，试试吧。。。。。搞了好久，尼玛。。。靠。。靠。。靠。。尼玛 。。靠。。靠。。。。好吧，谁让我手欠呢。
搜索到了很多关于AngularJS Form的案例
模仿着我要搞了个AngularJS Form，但是问题来了。。。。
发现初始化时候ng-model 跟 input 标签里的 value 不默契，冲突。。
后来想再AngularJS controller 里预先赋值 $scope.formData = {‘name':'张三'};
可以通过php程序把值赋到这个AngularJS controller里
&!-- AngularJS controller --&
&&& 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 {
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& });
&&&&&&& };
&!--对应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=""&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具angular中表单的使用
这两天写了个登录注册的页面，其中表单的提示与验证是用angular和h5的属性来写的，由于是ionic项目，所以里面有一些ionic中的css类，话不多说，上代码
html代码如下：
name="sign"&
class="list"&
class="item item-input item-stacked-label"&
class="input-label"&First Name&
class="sign-warning" ng-if="sign.first_name.$error.required&&sign.first_name.$touched"&*This does not allow null&
name="first_name"
ng-model="user.first_name"
type="text"
placeholder="John"&
class="item item-input item-stacked-label"&
class="input-label"&Last Name&
class="sign-warning" ng-if="sign.last_name.$error.required&&sign.last_name.$touched"&*This does not allow null &
name="last_name"
ng-model="user.last_name"
type="text"
placeholder="Suhr"
class="item item-input item-stacked-label"&
class="input-label"&Email&
class="sign-warning" ng-if="sign.email.$error.email&&sign.email.$touched"&*You enter a wrong email&
class="sign-warning" ng-if="sign.email.$error.required&&sign.email.$touched"&*This does not allow null&
name="email"
ng-model="user.email"
type="email"
placeholder=""&
class="item item-input item-stacked-label"&
class="input-label"&Phone&
class="sign-warning" ng-if="sign.tel.$error.required&&sign.tel.$touched"&*This does not allow null&
name="tel"
ng-model="user.tel"
type="tel"
placeholder="enter your cel phone number please"&
class="item item-input item-stacked-label"&
class="input-label"&Password&
class="sign-warning"
ng-if="(sign.password.$error.minlength||
sign.password.$error.maxlength)&&
sign.password.$touched"&
*密码位数请在6到18位数之间&&
name="password"
ng-model="user.password"
type="password"
ng-minlength="6"
ng-maxlength="18"
placeholder="enter your password please"
class="item item-input item-stacked-label"&
& class="input-label"&Confirm Password& class="sign-warning" ng-if="sign.confirm_pass.$error.compare&&sign.confirm_pass.$touched"&*前后两次密码输入不一致&&
name="confirm_pass"
ng-model="user.confirm_pass"
type="password"
placeholder="confirm your password please"
compare="user.password"
class="padding"&
class="button button-block color999" style="color:#fff"
ng-click="submitForm()"
ng-disabled="sign.first_name.$error.required||
sign.last_name.$error.required||
sign.email.$error.email||
sign.email.$error.required||
sign.tel.$error.required||
sign.password.$error.required||
sign.password.$error.minlength||
sign.password.$error.maxlength||
sign.confirm_pass.$error.compare"&Continue&
如果有不明白的，可以去查一下H5表单的属性，还有ng-disabled的运用。
另外，确认密码需要写个指令，如下：
.directive('compare',function(){
strict :'AE',
orgText : '=compare'
require : 'ngModel',
link : function(sco,ele,attr,con){
con.$validators.compare = function(v){
return v == sco.orgT
sco.$watch('orgText',function(){
con.$validate();
最后的页面效果是这样的：
没有更多推荐了，&&& &nbsp&nbsp&nbsp会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款AngularJS表单操作几个例子(表单提交,表单编辑默认值)
模仿着我要搞了个AngularJS Form，但是问题来了。。。。
发现初始化时候ng-model 跟 input 标签里的 value 不默契，冲突。。
后来想再AngularJS controller 里预先赋值 $scope.formData = {‘name':’张三’};
可以通过php程序把值赋到这个AngularJS controller里
&!-- AngularJS controller --&
var formApp = angular.module('formApp', []);
function formController($scope, $http) {
$scope.formData = {'name':'张三','remark':'备注'};
$scope.myForm = function() {
: '/role/edit',
: $.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) {
&!--对应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=""&
好了，上面非常的简单，我们再来看
AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keypress
使用点击一个按钮的指令，表单重置数据。
&input name="firstname" type="text" ng-model="firstName" required&
&input name="lastname" type="text" ng-model="lastName" required&
&input name="email" type="email" ng-model="email" required&
&button ng-click="reset()"&Reset&/button&
function studentController($scope) {
$scope.reset = function(){
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "";
$scope.reset();
可使用下面跟踪误差。
$dirty - 规定值已被改变。
$invalid- 该值的状态是无效的。
$error- 指出确切的错误。
下面的例子将展示上述所有指令。
testAngularJS.html
&title&Angular JS Forms&/title&
table, th , td {
border-collapse:
padding: 5
table tr:nth-child(odd) {
background-color: #f2f2f2;
table tr:nth-child(even) {
background-color: #
&h2&AngularJS Sample Application&/h2&
&div ng-app="" ng-controller="studentController"&
&form name="studentForm" novalidate&
&table border="0"&
&tr&&td&Enter first name:&/td&&td&&input name="firstname" type="text" ng-model="firstName" required&
&span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid"&
&span ng-show="studentForm.firstname.$error.required"&First Name is required.&/span&
&/td&&/tr&
&tr&&td&Enter last name: &/td&&td&&input name="lastname"
type="text" ng-model="lastName" required&
&span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid"&
&span ng-show="studentForm.lastname.$error.required"&Last Name is required.&/span&
&/td&&/tr&
&tr&&td&Email: &/td&&td&&input name="email" type="email" ng-model="email" length="100" required&
&span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid"&
&span ng-show="studentForm.email.$error.required"&Email is required.&/span&
&span ng-show="studentForm.email.$error.email"&Invalid email address.&/span&
&/td&&/tr&
&tr&&td&&button ng-click="reset()"&Reset&/button&&/td&&td&&button
ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||
studentForm.lastname.$dirty && studentForm.lastname.$invalid ||
studentForm.email.$dirty && studentForm.email.$invalid"
ng-click="submit()"&Submit&/button&&/td&&/tr&
function studentController($scope) {
$scope.reset = function(){
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "";
$scope.reset();
&script src="angular.min.js"&&/script&
在Web浏览器打开textAngularJS.html。看到结果如下。
常用的表单验证指令
1. 必填项验证
某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：
&input type="text" required /&
2. 最小长度
验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：
&input type="text" ng-minlength="5" /&
3. 最大长度
验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：
&input type="text" ng-maxlength="20" /&
4. 模式匹配
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：
&input type="text" ng-pattern="/[a-zA-Z]/" /&
5. 电子邮件
验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：
&input type="email" name="email" ng-model="user.email" /&
验证输入内容是否是数字，将input的类型设置为number：
&input type="number" name="age" ng-model="user.age" /&
验证输入内容是否是URL，将input的类型设置为 url：
&input type="url" name="homepage" ng-model="user.facebook_url" /&
AngularJS表单操作几个例子(表单提交,表单编辑默认值)的相关文章
问题描述 mysql 数据导出修改表结构后,再导入,新添加的字段插入默认值 要实现的例子: 表A (a0,a1) 拥有数据100条 现在要将表结构修改为,A(a0,a1,a2),但是不想重新输入数据 所以,想先从旧的表中到处数据,然后导入新表,字段a2取默认值或固定值 求解决方案!! 解决方案 在各位大神的提示下,经过测试,alter table A add a2 数据类型 default 值 可以更改表结构 因此呢,我打算先把原表更改结构,导出数据,然后再将原表恢复原样 这样很安全了,不会影响
HttpClient使用post方法提交数据 源代码: 复制代码 代码如下: import Java.io.IOE import org.apache.commons.httpclient.H import org.apache.commons.httpclient.HttpC import org.apache.commons.httpclient.HttpE import org.apache.commo
代码: 复制代码 代码如下: &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv
提交表单|提交表单 为了使asp尽量减少服务器端的工作量,就应该多使用javascript,把所有提交字段使用javascript或vbscript检测后提交给服务器,这样服务器就不必再作检测,而在提交时可能会有人修改script从本地提交,这样便存在安全提交的问题,所以应该要求从服务器断路径提交,使其他地址提交提交无无效: &% server_v1=Cstr(Request.ServerVariables(&HTTP_REFERER&)) server_v2=Cstr(Requ
'函数名:ChkPost
用:禁止站外提交表单
'返回值:true站内提交,flase站外提交
'参数:链接串
function ChkPost()
dim server_v1,server_v2
chkpost=false
server_v1=Cstr(Request.ServerVariables(&HTTP_REFERER&))
server_v2=Cstr(Request.ServerVariables(&SERVER_
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType
本文实例讲述了ajax跨域(基础域名相同)表单提交的方法.分享给大家供大家参考.具体如下: 1.要在做ajax提交的页面中添加如下js语句: &script type=&text/javascript&& document.domain=&基础域名&; &/script& 2.ajax表单提交表单时可以使用一个jquery的一个表单插件jquery.form.js 使用语法如下: //fromPost为要收集数据的form表单的id $(&q
本文实例讲述了jquery控制表单输入框显示默认值的方法.分享给大家供大家参考.具体实现方法如下: &!DOCTYPE html& &html& &head& &script language=&javascript& src=&jquery-1.6.2.min.js&&&/script& &script type=&text/javascript&& $(document)
简洁语法 这个例子是以字符串的方式发送数据,并且发送你的头信息.如果你不需要这些,并且希望Angular 的$http POST尽可能的简洁,我们可以使用简写方法: ... $http.post('process.php', $scope.formData) .success(function(data) { ... }); ... 绝对更简洁更容易记住方法. $http 内部控制器: 理想的,你可以将$http请求从controller移除到 service.这只是为了演示目的,我们将会尽快在
记得以前有朋友想让他的vfp程序运行时是这个样子:没有VFP的主屏幕(_screen),运行时直接在桌面出现一个登录对话框,输入用户名及密码并验证通过之后出现软件的主界面,看起来象是用VB编写的软件,有种很酷的感觉. VFP软件主界面的实现通常可以采用两种方式:主屏幕(_screen)或顶层表单(或者叫父子表单).可以用顶层表单来实现上述的想法. VFP中设置顶层表单的方法是将表单的showWindow属性设置为&2-作为顶层表单&,这也就是所谓的&父表单&了:与之记录一些开发过程遇到的问题
angularjs表单数据提交-对象方式提交
1.html代码
&body ng-app="Power" ng-controller="userCtrl" ng-init="initData()"&
用户名：&input type="text" ng-model="user.username" /&&br/&
密码：&input type="text" ng-model="user.password" /&
&input type="button" value="提交" ng-click="saveUser()" /&
2.service代码
this.saveUser=function(user){
var deferred = $q.defer();
$http.get("userAction!doNotNeedSession_add.action", {
params:user//传整个表单数据
}).success(function (data) {
// 如果连接成功，延时返回给调用者
deferred.resolve(data);
.error(function () {
deferred.reject('连接服务器出错！');
return deferred.
3.controller代码
$scope.user={username:'',password:''};
$scope.saveUser=function () {
userService.saveUser($scope.user).then(function (data) {
console.info(data);
没有更多推荐了，