AngularJS表单编辑提交功能实例

 更新时间:2015年02月13日 11:49:43   投稿:junjie  
这篇文章主要介绍了AngularJS表单编辑提交功能实例,本文讲解如何修改表单的默认值,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

研究了下高大上的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="">

相关文章

  • 详解angularjs4部署文件过大解决过程

    详解angularjs4部署文件过大解决过程

    这篇文章主要介绍了详解angularjs4部署文件过大解决过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 在 Angular2 中实现自定义校验指令(确认密码)的方法

    在 Angular2 中实现自定义校验指令(确认密码)的方法

    这篇文章给大家探索 Angular 2 内建的自定义验证,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-01-01
  • 浅谈Angular.js中使用$watch监听模型变化

    浅谈Angular.js中使用$watch监听模型变化

    当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件。本篇文章主要介绍了Angular.js中使用$watch监听模型变化,有兴趣的可以了解一下
    2017-01-01
  • angular实现form验证实例代码

    angular实现form验证实例代码

    本篇文章主要介绍了angular实现form验证实例代码,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • 使用Angular9和TypeScript开发RPG游戏的方法

    使用Angular9和TypeScript开发RPG游戏的方法

    这篇文章主要介绍了使用Angular9和TypeScript开发RPG游戏的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • AngularJS中的DOM操作用法分析

    AngularJS中的DOM操作用法分析

    这篇文章主要介绍了AngularJS中的DOM操作,较为详细的分析了AngularJS针对DOM操作的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2016-11-11
  • AngularJS的Filter的示例详解

    AngularJS的Filter的示例详解

    本文通过示例给大家详解angularjs 的filter知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-03-03
  • angularjs实现天气预报功能

    angularjs实现天气预报功能

    这篇文章主要为大家详细介绍了angularjs实现天气预报功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Angular中的结构指令模式及使用详解

    Angular中的结构指令模式及使用详解

    这篇文章主要为大家介绍了Angular中的结构指令模式及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • angular5 子组件监听父组件传入值的变化方法

    angular5 子组件监听父组件传入值的变化方法

    今天小编就为大家分享一篇angular5 子组件监听父组件传入值的变化方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论

?


http://www.vxiaotou.com