my scope function "login()" is not working when the user enter with the "ng-click" , why is not working? please help!
HTML
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login()" >Entrar</a>
Funcion on controller
.controller('loginCtrl', ['$scope', "Auth", '$state',
function ($scope, Auth, $stateParams) {
$scope.login = function() {
$signin_email = $scope.userloginForm.email.$modelValue;
$signin_password = $scope.userloginForm.password.$modelValue;
// sign in
Auth.$signInWithEmailAndPassword($signin_email, $signin_password)
.then(function(firebaseUser) {
//$scope.message = "User created with uid: " + firebaseUser.uid;
alert(firebaseUser.email + " logged in successfully!");
}).catch(function(error) {
alert(error.message);
//$scope.error = error;
});
};
}])
That is the form :
<form id="login-form1" name="$parent.userloginForm" class="list" >
<div class="spacer" style="height: 40px;"></div>
<ion-list id="login-list1">
<label class="item item-input" id="login-input1">
<span class="input-label">Email :</span>
<input type="text" name="email" ng-model="member.email" placeholder="">
</label>
<label class="item item-input" id="login-input2">
<span class="input-label">Senha :</span>
<input type="password" ng-model="member.password" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login()" >Entrar</a>
<a href-inappbrowser="/signup" id="login-button2" class="button button-positive button-block button-clear">Esqueceu sua senha?</a>
</form>
Try to use $scope.member.email instead of $scope.userloginForm.email.$modelValue and $scope.member.password instead of $scope.userloginForm.password.$modelValue inside login function, cause into this properties Angular writes from form's inputs. Of course, an the top of your controller, you should have $scope.member = {}. Also, I think your form's name should be userloginForm, not $parent.userloginForm. And one more thing - if you don't have to, you should not use ng-click() to submit form, you should ng-submit="login" on your form and <button id="login-button1" class="button button-assertive button-block icon-right ion-log-in type="submit">Entrar</button>
Instead of using $scope.userloginForm.email.$modelValue you can directly pass ng-model object as a parameter in the login function.
In HTML :
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a>
In controller :
$scope.login = function(member) {
var signin_email = member.email;
var signin_password = member.password;
console.log(signin_email);
console.log(signin_password);
}
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.login = function(member) {
var signin_email = member.email;
var signin_password = member.password;
console.log(signin_email);
console.log(signin_password);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form id="login-form1" name="userloginForm" class="list" >
<div class="spacer" style="height: 40px;"></div>
<ion-list id="login-list1">
<label class="item item-input" id="login-input1">
<span class="input-label">Email :</span>
<input type="text" name="email" ng-model="member.email" placeholder="">
</label>
<label class="item item-input" id="login-input2">
<span class="input-label">Senha :</span>
<input type="password" ng-model="member.password" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a>
<a href-inappbrowser="/signup" id="login-button2" class="button button-positive button-block button-clear">Esqueceu sua senha?</a>
</form>
</div>
Related
I don't know the reason why, but at each of page of my webapp, at the left side upper there is a dot like this:
It's an html problem I think, in fact running the snippet below you can see that:
<ion-view view-title="Invia feedback">
<ion-content class="ioncontentcatalog">
<li>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=logged>Invia feedback</h2>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=!logged>Per poter mandare un feedback devi registrarti!</h2>
<form name="feedback">
<div class="list" ng-if=logged>
<label class="item item-input">
<textarea name="Text1" cols="40" rows="5" ng-model="feedbacktext" required></textarea>
</label>
<label ng-show="feedback.$invalid"> Scrivi qualcosa </label>
<label class="item">
<button class="button button-block button-positive" ng-disabled="feedback.$invalid" ng-click="send(feedbacktext)">Invia</button>
</label>
</div>
</form>
</li>
</ion-content>
</ion-view>
However, I put also the controller of this page:
.controller('SendFeedbackCtrl', function($scope, $stateParams, $ionicPopup, restService) {
var token = localStorage.getItem("token");
$scope.tknuser = JSON.parse(token);
$scope.logged = false;
$scope.feedbackform = {
message: "adad",
readfb: false,
user: {
iduser: -1
}
};
And also the class style used:
.ioncontentcatalog {
background-image: url('../img/background.png')
}
That's very strange and I don't know how to solve.
It is the li default style, add this CSS rule to remove it:
list-style
https://developer.mozilla.org/en/docs/Web/CSS/list-style
.ioncontentcatalog li{
list-style: none;
}
<ion-view view-title="Invia feedback">
<ion-content class="ioncontentcatalog">
<li>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=logged>Invia feedback</h2>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=!logged>Per poter mandare un feedback devi registrarti!</h2>
<form name="feedback">
<div class="list" ng-if=logged>
<label class="item item-input">
<textarea name="Text1" cols="40" rows="5" ng-model="feedbacktext" required></textarea>
</label>
<label ng-show="feedback.$invalid"> Scrivi qualcosa </label>
<label class="item">
<button class="button button-block button-positive" ng-disabled="feedback.$invalid" ng-click="send(feedbacktext)">Invia</button>
</label>
</div>
</form>
</li>
</ion-content>
</ion-view>
Just remove li decoration like this:
<li style="list-style-type: none;">
I need to validate login function. I added my Login.html file and LoginController.js file. I want to validate this from using this javascript. This is angularjs code. after that I have to set php url for this code.
Login.html
$scope.submitForm = function() {
var user_email = user_email;
var user_password = user_password;
if(user_email && user_password){
console.log(user_email);
}
};
<div ng-controller="LoginController">
<form name="userForm" ng-submit="submitForm()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" name="user_email" ng-model="user.user_email" required>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="user_password" ng-model="user.user_password" required>
</label>
</div>
<span ng-show="userForm.user_email.$touched && userForm.user_email.$invalid">The Username is required.</span> </br>
<span ng-show="userForm.user_password.$touched && userForm.user_password.$invalid">The Password is required.</span>
<button class="button button-block button-positive activated">Sign In</button>
<button onclick="location.href='#/login/:friendId/register/';" class="button button-block button-positive activated">Register</button>
</form>
</div>
Made changes in your provided code,on click of Register/ Sign In you can call submitForm() function through ng-click to evaluate the form values.Check the below code snippet for working model.
angular.module('myApp', ['ng'])
.controller('LoginController', ['$scope',
function($scope) {
$scope.user = {};
$scope.submitForm = function() {
var user_email = $scope.user.user_email;
var user_password = $scope.user.user_password;
if (user_email && user_password) {
console.log(user_email);
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="LoginController">
<form name="userForm">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" name="user_email" ng-model="user.user_email" required>{{user.user_email}}
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="user_password" ng-model="user.user_password" required>{{user.user_password}}
</label>
</div>
<span ng-show="userForm.user_email.$touched && userForm.user_email.$invalid">The Username is required.</span>
</br>
<span ng-show="userForm.user_password.$touched && userForm.user_password.$invalid">The Password is required.</span>
<button class="button button-block button-positive activated">Sign In</button>
<button ng-click="submitForm()" class="button button-block button-positive activated">Register</button>
</form>
</div>
.controller('newGoalCtrl', function($scope, $ionicPopup) {
$scope.addNewGoal = function() {
alert($scope.goaltitle);
};
});
<ion-pane view-title="goal">
<ion-header-bar class="bar-positive">
<div class="buttons">
<a nav-transition="android" class="button button-icon icon ion-arrow-left-b" ng-click="" href="#/index"></a>
</div>
<h1 class="title">Add New Goal</h1>
</ion-header-bar>
<ion-content class="padding" scroll="false" >
<div class="list">
<label class="item item-input">
<input type="text" placeholder="#Title" ng-model="goaltitle">
</label>
<label class="item item-input">
<span class="hashtag-title">#{{hashtagname}}</span>
</label>
<label class="item item-input">
<textarea placeholder="Goal"></textarea>
</label>
</div>
</ion-content>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<button class="button button-positive button-bar no-round-corner" ng-click="addNewGoal()">Add Goal</button>
</ion-tabs>
</ion-pane>
This is my code... I don't know how to explain but it always say undefined when I enter something on the text box...
but $scope.goaltitle = "something" is working on the .controller(); ...
Short Answer
The root cause of this issue is, ion-content does create a prototypically inherited child
scope, that's why goaltitle(primitive type) of controller scope is different than the goaltitle you are using on ng-model
Ideally practice is to follow dot rule while defining view model. So that prototypal inheritance rule will get followed with scope hierarchy.
You should define object and then do assign all the ng-model property in it.
Controller
.controller('newGoalCtrl', function($scope, $ionicPopup) {
$scope.model = {};
$scope.addNewGoal = function() {
alert($scope.model.goaltitle);
};
});
Then have goalTitle, Goal, etc. property in it.
Markup
<ion-content class="padding" scroll="false" >
<div class="list">
<label class="item item-input">
<input type="text" placeholder="#Title" ng-model="model.goaltitle">
</label>
<label class="item item-input">
<span class="hashtag-title">#{{hashtagname}}</span>
</label>
<label class="item item-input">
<textarea placeholder="Goal" ng-model="model.Goal"></textarea>
</label>
</div>
</ion-content>
I don't want to re-write whole explanation again, so here I'm referencing similar answer, where I've covered all detailed information.
For the html
<input type="text" placeholder="#Title" ng-model="foo.goaltitle">
JS:
$scope.foo = {{
goaltitle : ''
}}
I now try to make Items list form that are able to add, edit and delete.
Add and edit are work fine, however, when I trying to delete it is not working as expected.
Here, is my partial of my code, that consist of delete button.
<!-- Added Items Stage -->
<div ng-repeat-start="item in items" ng-form="editItemForm" class="row">
<div class="col">
<input type="text" name="description" ng-model="item.description" placeholder="description" required>
</div>
<div class="col">
<input type="number" name="quantity" pattern="\d*" ng-model="item.quantity" placeholder="quantity" required>
</div>
<div class="col">
<input type="text" name="price" ng-model="item.price" placeholder="price" required>
</div>
<div class="col">
<select name="taxType" ng-model="item.taxType" required>
<option value="ZR">ZR</option>
<option value="SR">SR</option>
</select>
</div>
<div class="col col-20" ng-bind="(item.quantity&&item.price)?((item.quantity*item.price) | currency:''):'0.00'"></div>
<div class="col col-10">
<button type="button" class="button button-assertive button-clear icon ion-close-circled" ng-click="deleteItem(item)"></button>
</div>
</div>
<hr ng-repeat-end>
Second part is how I delete item
$scope.deleteItem = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};
I tried pass in $index, or use delete instead of splice, but it still cannot work. Help me please. Thank you.
This is my demo
Note: I think the item removed, but the html not updated.
That sometimes happens when Angular is not aware that a change has been made to the model. When that's the case you can force an update by wrapping your function inside a $timeout with no delay:
$scope.deleteItem = function(item) {
$timeout(function () {
$scope.items.splice($scope.items.indexOf(item), 1);
});
};
Don't forget to inject the $timeout service into the controller.
I not quite understand why? but your problem in ng-form attribute on your repeater.
If you remove it - all work
var nameApp = angular.module('starter', ['ionic', 'ngMessages']);
nameApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('auth', {
url: '/auth',
templateUrl: 'auth.html',
})
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
$urlRouterProvider.otherwise("/auth");
});
nameApp.directive('isolateForm', [function() {
return {
restrict: 'A',
require: '?form',
link: function(scope, elm, attrs, ctrl) {
if (!ctrl) {
return;
}
// Do a copy of the controller
var ctrlCopy = {};
angular.copy(ctrl, ctrlCopy);
// Get the parent of the form
var parent = elm.parent().controller('form');
// Remove parent link to the controller
parent.$removeControl(ctrl);
// Replace form controller with a "isolated form"
var isolatedFormCtrl = {
$setValidity: function(validationToken, isValid, control) {
ctrlCopy.$setValidity(validationToken, isValid, control);
parent.$setValidity(validationToken, true, ctrl);
},
$setDirty: function() {
elm.removeClass('ng-pristine').addClass('ng-dirty');
ctrl.$dirty = true;
ctrl.$pristine = false;
},
};
angular.extend(ctrl, isolatedFormCtrl);
}
};
}]);
nameApp.controller('AuthCtrl', function($scope, $state) {
$scope.newItem = {
description: undefined,
quantity: undefined,
price: undefined,
taxType: undefined
};
$scope.items = [];
$scope.addItem = function() {
console.log({
description: $scope.newItem.description,
quantity: $scope.newItem.quantity,
price: $scope.newItem.price,
taxType: $scope.newItem.taxType
});
$scope.items.push({
description: $scope.newItem.description,
quantity: $scope.newItem.quantity,
price: $scope.newItem.price,
taxType: $scope.newItem.taxType
});
console.log($scope.items);
$scope.newItem.description = undefined;
$scope.newItem.quantity = undefined;
$scope.newItem.price = undefined;
$scope.newItem.taxType = "SR";
};
$scope.deleteItem = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};
$scope.authorization = {
referenceNo: '',
};
$scope.signIn = function(form) {
if (form.$valid) {
$state.go('home');
}
};
});
nameApp.controller('HomeCtrl', function($scope) {
});
.error-container {
margin: 5px 0;
}
.error-container:last-child {
margin: 5px 0 0;
}
.error {
padding: 10px 16px;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 11px;
text-transform: uppercase;
color: #555;
vertical-align: middle;
}
.error i {
font-size: 24px;
color: #B83E2C;
vertical-align: middle;
}
.last-error-container > .error {
padding: 10px 16px 0;
}
.has-errors {
border-bottom: 3px solid #B83E2C;
}
.no-errors {
border-bottom: 3px solid green;
}
<html ng-app="starter">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="auth.html" type="text/ng-template">
<ion-view view-title="Authorization Page">
<ion-content class="padding" ng-controller="AuthCtrl">
<h2 style="text-align: center;">Form validation example</h2><br/>
<form name="newDocumentForm" ng-submit="signIn(newDocumentForm)" novalidate>
<div class="list">
<label class="item item-input" ng-class="{ 'has-errors' : newDocumentForm.referenceNo.$invalid && newDocumentForm.$submitted, 'no-errors' : newDocumentForm.referenceNo.$valid && newDocumentForm.$submitted}">
<span class="input-label">Reference No</span>
<input type="text" name="referenceNo" ng-model="authorization.username" ng-minlength="5" ng-maxlength="20" required>
</label>
<div class="error-container" ng-show="newDocumentForm.referenceNo.$error && newDocumentForm.$submitted" ng-messages="newDocumentForm.referenceNo.$error">
<div ng-messages-include="error-list.html"></div>
</div>
</div>
<!-- Title -->
<div class="row">
<div class="col">Description</div>
<div class="col">Quantity</div>
<div class="col">Price</div>
<div class="col">Tax Type</div>
<div class="col col-20">Amount</div>
<div class="col col-10"></div>
</div>
<!-- Added Items Stage -->
<div ng-repeat-start="item in items" class="row">
<div class="col">
<input type="text" name="description" ng-model="item.description" placeholder="description" required>
</div>
<div class="col">
<input type="number" name="quantity" pattern="\d*" ng-model="item.quantity" placeholder="quantity" required>
</div>
<div class="col">
<input type="text" name="price" ng-model="item.price" placeholder="price" required>
</div>
<div class="col">
<select name="taxType" ng-model="item.taxType" required>
<option value="ZR">ZR</option>
<option value="SR">SR</option>
</select>
</div>
<div class="col col-20" ng-bind="(item.quantity&&item.price)?((item.quantity*item.price) | currency:''):'0.00'"></div>
<div class="col col-10">
<button type="button" class="button button-assertive button-clear icon ion-close-circled" ng-click="deleteItem(item)"></button>
</div>
</div>
<hr ng-repeat-end>
<!-- Adding Stage -->
<div ng-form="addItemForm" class="row" isolate-form>
<div class="col">
<input type="text" name="description" ng-model="newItem.description" placeholder="description" required/>
</div>
<div class="col">
<input type="number" pattern="\d*" name="quantity" ng-model="newItem.quantity" placeholder="quantity" required/>
</div>
<div class="col">
<!--<input type="text" name="price" ng-model="newItem.price" placeholder="price" ng-pattern="/^[0-9]{1,7}$/" required/>-->
<input type="text" name="price" ng-model="newItem.price" placeholder="price" step="0.01" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" required/>
</div>
<div class="col">
<select name="taxType" ng-model="newItem.taxType" required>
<option value="ZR">ZR</option>
<option value="SR">SR</option>
</select>
</div>
<div class="col col-20" ng-bind="(newItem.quantity&&newItem.price)?((newItem.quantity*newItem.price) | currency:''):'0.00'"></div>
<div class="col col-10">
<button type="button" ng-disabled="addItemForm.$invalid" class="button button-balanced button-clear icon ion-plus-circled" ng-click="addItem()"></button>
</div>
</div>
<div class="error-container last-error-container" ng-show="addItemForm.price.$error.pattern" ng-messages="addItemForm.price.$error">
<div ng-messages-include="currency-error-list.html"></div>
</div>
<button class="button button-full button-positive" type="submit">
Submit
</button>
</form>
</ion-content>
</ion-view>
</script>
<script id="home.html" type="text/ng-template">
<ion-view view-title="Second page">
<ion-content class="padding">
<h1>Wellcome</h1>
</ion-content>
</ion-view>
</script>
<script id="currency-error-list.html" type="text/ng-template">
<div class="error" ng-message="pattern">
<i class="ion-information-circled"></i>
Invalid currency format!
</div>
</script>
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
<i class="ion-information-circled"></i>
This field is required!
</div>
<div class="error" ng-message="minlength">
<i class="ion-information-circled"></i>
Minimum length of this field is 5 characters!
</div>
<div class="error" ng-message="maxlength">
<i class="ion-information-circled"></i>
Maximum length of this field is 20 characters!
</div>
</script>
Came across the same problem; “Splice not working”. In my case, I had to resolve as below just in case if it helps someone.
If you are dealing with objects, please note 'indexOf' works for array not for Object inside the array. You can do something like below to identify the index and handle this case;
$scope.removeReport = function(report) {
var index = $scope.contact.reports.map(function(r) { return r.id;}).indexOf(report.id);
if (index >= 0) {
$scope.contact.reports.splice(index, 1);
}
}
Use Index in place of Item
<button type="button" class="button button-assertive button-clear icon ion-close-circled" ng-click="deleteItem($index)"></button>
Also in Controller
$scope.deleteItem = function(index) {
$scope.items.splice(index, 1);
};
I am working on ionic framework.I am trying to create a login page.I want to read data inserted in username and pass word fields in login.html.I tried to read using $scope but that didn't work.I tried to use console.log() to print the variables in console but i am getting an error saying it is "undefined".I am new to ionic and angularjs.
login.html:
<ion-view view-title="Login" name="menuContent">
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form >
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="user" placeholder="Email or Phone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" ng-model="pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="loginNew()">Log in</button>
</label>
<label class="item">
<span class="input-label">New user?</span>
<button class="button button-block button-positive" ng-click="signNew()">Signup</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
app.js:
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('app.signup', {
url: '/signup',
views: {
'menuContent': {
templateUrl: 'templates/signup.html',
controller: 'SignupCtrl'
}
}
})
controller.js:
//start LoginCtrl
.controller('LoginCtrl', ['$scope','$state','$http' , function($scope,$state,$http) {
$scope.signNew=function(){
console.log("sas");
$state.go('app.signup');
console.log("sas");
};
$scope.loginNew = function($scope){
console.log($scope.user+" daww");
console.log($scope.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+$scope.user+"&Password="+$scope.pass)
.success(function(data) {
alert("Login was Successful.");
console.log("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
}])
//end LoginCtrl
//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
//start SignupCtrl
.controller('SignupCtrl', ['$scope', function($scope) {
}]);
//end SignupCtrl
When you use form in your HTML then go for ng-submit not
ng-click, because ng-click not validate your html. Example: If you use required in input box then ng-click not validate required so use
ng-submit
See this Documentation ng-submit
Note: It is not compulsory to use ng-submit it is just and best
practices which we have to follow
And as per you problem you have to pass one object from html and get this object in controller. it will solve your problem.
<form ng-submit="loginNew(login)">
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="login.user" placeholder="Email or Phone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" ng-model="login.pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" >Log in</button>
</label>
<label class="item">
<span class="input-label">New user?</span>
<button class="button button-block button-positive">Signup</button>
</label>
</div>
</form>
Now in controller :
$scope.loginNew = function(mylodinObject){
console.log(mylodinObject.user+" daww");
console.log(mylodinObject.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+mylodinObject.user+"&Password="+mylodinObject.pass)
.success(function(data) {
alert("Login was Successful.");
console.log("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
Some time if you want to use both ng-click and ng-submit then you will be in problem so for that refere this link it will solve your problem :ng-click and ng-submit
.controller('LoginCtrl', ['$log','$scope','$state','$http' , function($log,$scope,$state,$http) {
$log.debug($scope.user);
$log.debug($scope.pass);
Need not pass $scope as the parameter here
$scope.loginNew = function(){
$log.debug($scope.user);
$log.debug($scope.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+$scope.user+"&Password="+$scope.pass)
.success(function(data) {
alert("Login was Successful.");
$log.debug("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
}])
Design the form as follows
<form >
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="xxx.user" placeholder="Email or Phone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" ng-model="xxx.pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="loginNew(xxx)">Log in</button>
</label>
</div>
</form>
and in controller
$scope.loginNew = function(xxx){
console.log(xxx); // this gives the user and pass variables from form
console.log(xxx.user); //for user
console.log(xxx.pass); //for pass
};