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判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
react 项目中引入图片的几种方式
Jun 02 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
微信小程序左右滑动的实现代码
2017/12/15 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
python合并文本文件示例
2014/02/07 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
网上蛋糕店创业计划书
2014/01/24 职场文书
晚会邀请函范文
2014/01/24 职场文书
清洁工岗位职责
2014/01/29 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python