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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
浅谈document.write()输出样式
May 07 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
node.js开发辅助工具nodemon安装与配置详解
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 error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python适合做数据挖掘吗
2020/06/16 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
运动会100米解说词
2014/01/23 职场文书
货车司机岗位职责
2014/03/18 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
考试没考好检讨书
2015/05/06 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
实习感想范文
2015/08/10 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android