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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
jquery对表单操作2
Apr 06 Javascript
javascript插入样式实现代码
Feb 22 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 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防止SQL注入详解及防范
2013/11/12 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
PHP反向代理类代码
2014/08/15 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python实现身份证号码解析
2015/09/01 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
妈妈的账单教学反思
2014/02/06 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
安全演讲稿开场白
2014/08/25 职场文书
2015年教师节慰问信
2015/03/23 职场文书
Redis可视化客户端小结
2021/06/10 Redis
源码安装apache脚本部署过程详解
2022/09/23 Servers