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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
一起深入理解js中的事件对象
Feb 06 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
php遍历数组的方法分享
2012/03/22 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
jQuery中height()方法用法实例
2014/12/24 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
VUE重点问题总结
2018/03/19 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
Django开发中的日志输出的方法
2018/07/02 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Python如何输出百分比
2020/07/31 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
别名指示符是什么
2012/10/08 面试题
年终自我鉴定
2013/10/09 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
劳动竞赛口号
2014/06/16 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
闪闪的红星观后感
2015/06/08 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python