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吗?
Feb 24 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 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
关于手调机和数调机的选择
2021/03/02 无线电
php防注入及开发安全详细解析
2013/08/09 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
详解JavaScript树结构
2017/01/09 Javascript
js常用DOM方法详解
2017/02/04 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
layer插件select选中默认值的方法
2018/08/14 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
如何利用find命令查找文件
2016/11/18 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
餐饮收银员岗位职责
2014/02/07 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
大一新生期末自我评价
2014/09/12 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
新年祝酒词大全
2015/08/11 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers