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处理table表格的代码
Dec 06 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
js返回顶部实例分享
Dec 21 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
浅谈JavaScript 声明提升
Sep 14 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中文分词 自动获取关键词介绍
2012/11/13 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php实现简单爬虫的开发
2016/03/28 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
php无限极分类实现方法分析
2019/07/04 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python中使用while循环的实例
2019/08/05 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
委托公证书范本
2014/04/03 职场文书
师恩难忘教学反思
2014/04/27 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
答辩状格式范本
2015/05/22 职场文书
2015暑假假期总结
2015/07/13 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL