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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 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 版获取重定向后的地址(代码)
2013/06/26 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
详解python基础之while循环及if判断
2017/08/24 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
新年寄语大全
2014/04/12 职场文书
房屋租赁协议书
2014/10/18 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
律政俏佳人观后感
2015/06/09 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书