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学习笔记9 prototype封装继承
Jan 11 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
js Dialog 实践分享
Oct 22 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
jquery中radio checked问题
Mar 16 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
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
一个捕获函数输出的函数
2007/02/14 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
js加强的经典分页实例
2013/03/15 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
JS实现星星海特效
2019/12/24 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
python如何定义带参数的装饰器
2018/03/20 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
播音主持专业个人自我评价
2014/01/09 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
地球一小时倡议书
2014/04/15 职场文书
商务经理岗位职责
2014/08/03 职场文书
护士岗位竞聘书
2015/09/15 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
Python包argparse模块常用方法
2021/06/04 Python
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL