Angular之【form提交问题】
前端页面是这样:
- <form class="form-horizontal" role="form" name="LoginForm" >
- <div class="list list-inset">
- <label class="item item-input">
- <input type="text" placeholder="用户名" ng-model="userInfo.username">
- </label>
- <label class="item item-input">
- <input type="password" placeholder="密码" ng-model="userInfo.password">
- </label>
- </div>
- <button type="submit" ng-disabled="LoginForm.$invalid" class="button button-block button-balanced" ng-click="login()">登录</button>
- <p class="text-center"> <a ui-sref="register">注册</a></p>
- </form>
而angular是这样的
- var McardController = angular.module('McardController', [ 'angular-flash.service', 'angular-flash.flash-alert-directive' ])
- .config(function (flashProvider) {
- // Support bootstrap 3.0 "alert-danger" class with error flash types
- flashProvider.errorClassnames.push('alert-danger');
- });
- McardController.controller('LoginCtrl', function($scope, $http, $window, $location, flash, LoginService, $ionicPopup, $state) {
- $scope.userInfo = {};//这里如果没有初始化,表单提交过来是接收不到数据的。这个地方值得我们注意下
- /* $http.get('/api/login')
- .success(function(data){
- // $scope.cards = data;
- }).error(function(data){
- console.log('Error:'+data);
- });*/
- $scope.failed_login = "";
- $scope.login = function() {
- console.log($scope.userInfo);
- $scope.$parent.failed_login = "";
- var user = {"username": $scope.userInfo.username, "password": $scope.userInfo.password};
- console.log(user);
- if($scope.userInfo.username!==undefined || $scope.userInfo.password !==undefined){
- // $http({method: 'POST', url: '/api/login', user:user}).
- $http.post('/api/login', $scope.userInfo).
- success(function(data, status, headers, config) {
- console.log("login success");
- flash.success = "Success";
- // $window.location.href="/configure";
- $location.path('/configure');
- }).
- error(function(data, status, headers, config) {
- var alertPopup = $ionicPopup.alert({
- title: '登录失败!',
- template: '请检查你的账号!'
- });
- });
- }
- /* LoginService.loginUser($scope.userInfo).success(function(data) {
- // var user = {"username": $scope.username, "password": $scope.password};
- $http.post('/api/signup', $scope.userInfo)
- .success(function(data){
- $location.path('/home');
- }).error(function(data){
- console.log('Error:'+data);
- });
- $state.go('tab.dash');
- }).error(function(data) {
- var alertPopup = $ionicPopup.alert({
- title: '登录失败!',
- template: '请检查你的账户!'
- });
- });*/
- }
- })
Angular之【form提交问题】的更多相关文章
- AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...
- 关于button和form提交的一些问题
1.form 中type 为submit 和button的区别 submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理( ...
- 解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象
之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...
- struts2中form提交到action中的中文参数乱码问题解决办法(包括取中文路径)
我的前台页是这样的: <body> <form action="test.action" method="post"> ...
- jquery.form.js实现将form提交转为ajax方式提交的使用方法
本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...
- jquery.validate+jquery.form提交的三种方式
原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...
- Extjs ajax form 提交
1.form 提交 form.form.submit({ url: "/HandlerExcelToDB/UploadFile.ashx", params: {}, success ...
- 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据
jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...
- HttpWebRequest结合HtmlAgilityPack实现网页form提交
年前一个项目,需要在某个系统实现系统自动操作. 系统页面使用form提交,页面参数较多,也参数设计一系列计算逻辑,改动一个值,其他值自动改变. 传统方法使用正则表达式匹配参数,构建post参数进行请求 ...
- spring MVC做form提交Neither BindingResult nor plain target object for bean name 'command' available
这两天在做spring3.0 MVC+hibernate3.2的练习中,做简单的form提交, 一直报java.lang.IllegalStateException: Neither BindingR ...
随机推荐
- Step-by-Step XML Free Spring MVC 3 Configuration--reference
The release of Spring 2.5 reduce the burden of XML by introduction annotation based configuration, b ...
- Scala中的构造器
Scala中的构造器 Scala中的构造器分为两类,主构造器和辅助构造器 主构造器是通过类名后面跟的括号里加参数列表来定义 辅助构造器是通过关键字this定义 定义一个无参主构造器 class rec ...
- jdbc连接池中c3p0的配置文件的详解以及在在java中如何使用
<c3p0-config> <!-- 默认配置,如果没有指定则使用这个配置 --> <default-config> <property name=" ...
- CCOrbitCamera卡牌翻转效果
static CCOrbitCamera* create(float t, float radius, float deltaRadius, float angleZ, float deltaAngl ...
- cocos2dx新建android项目lib拷贝、访问权限等问题集
win7上面搭建cocos2dx的android项目,用create-android-project.bat新建一个项目时,出现了访问权限和项目无lib的问题. 解决方案: 1.项目无lib问题. 当 ...
- css笔记19:浮动的案例
案例一: 1. 首先是01.html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- HTTP协议理解
HTTP(Hyper Text Transfer Protocol)超文本传输协议,是一种请求响应式协议,类似两国会晤中需要遵守的规则.那么,其中有什么内容特点呢? HTTP特点: 1)支持客户端/服 ...
- poj 3177 边连通分量
思路: dfs求出所有点的low值,然后对每个连通分量进行缩点,可以通过low来进行缩点.虽然在同一连通分量里可能存在不同的low值,但这并不影响缩点.将每个连通分量缩为一个点后,只要求出这个缩点后的 ...
- 转: 基于nginx的hls直播系统
转自:http://blog.csdn.net/cjsafty/article/details/9108587 看点: 1. 详细解解答了 nginx rtmp配置过程. 前写了一篇基于nginx的h ...
- 嵌入式开发笔记 - U-Boot相关
1.U-boot使用准备 1.1 U-boot下载 通过德国的denx软件中心提供的FTP下载合集,下载网址: ftp://ftp.denx.de/pub/u-boot/