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 尚未实现错误解决办法
Nov 27 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
svg动画之动态描边效果
Feb 22 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 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中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
JS实现多选框的操作
2020/06/24 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
详解django三种文件下载方式
2018/04/06 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
医学毕业生自荐信
2013/10/11 职场文书
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
运动会广播稿400字
2014/01/25 职场文书
预备党员表决心书
2014/03/11 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Nginx内网单机反向代理的实现
2021/11/07 Servers