AngularJS表单编辑提交功能实例


Posted in Javascript onFebruary 13, 2015

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

搜索到了很多关于AngularJS Form的案例
如:

http://www.angularjs.cn/A08j

https://github.com/tiw/angularjs-tutorial

https://github.com/tiw/angularjs-tutorial/blob/master/ng-form.markdown

https://github.com/tiw/angularjs-tutorial/blob/master/ng-form2.markdown

模仿着我要搞了个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="">
Javascript 相关文章推荐
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 #Javascript
jQuery动态修改超链接地址的方法
Feb 13 #Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 #Javascript
javascript获取元素离文档各边距离的方法
Feb 13 #Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 #Javascript
Js控制滑轮左右滑动实例
Feb 13 #Javascript
JavaScript函数作用域链分析
Feb 13 #Javascript
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
Python对数据库操作
2016/03/28 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python批量图片处理简单示例
2019/08/06 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
Python递归实现打印多重列表代码
2020/02/27 Python
对python中return与yield的区别详解
2020/03/12 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
部队学习十八大感言
2014/01/11 职场文书
葬礼司仪主持词
2014/03/31 职场文书
绿色校园广播稿
2014/10/13 职场文书
交通事故和解协议书
2015/01/27 职场文书
2015年保管员工作总结
2015/04/30 职场文书
2019大学生实习报告
2019/06/21 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python
Java后台生成图片的完整步骤
2021/08/04 Java/Android
如何利用React实现图片识别App
2022/02/18 Javascript
Java版 简易五子棋小游戏
2022/05/04 Java/Android