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 相关文章推荐
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
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
短波的认识
2021/03/01 无线电
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python多进程原理与用法分析
2018/08/21 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python pandas用法最全整理
2019/08/04 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
食堂标语大全
2014/06/11 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
小学生家长意见
2015/06/03 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android