Faizah Pratiwi Faizah Pratiwi - 1 month ago 21
AngularJS Question

Button cant work

i want to make login with ionic and angularjs. when i'm finish my code and run to my browser, the button can't work. anyone can help me? i'm new with ionic

my login view :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link rel="manifest" href="manifest.json">

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="apps" ng-controller="PostController as postCtrl">
<ion-view view-title="Please Sign in">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="postCtrl.inputData.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="postCtrl.inputData.password">
</label>
</div>
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<button class="button button-full button-balanced" ng-click="postForm">Sign In</button>
</ion-content>
</ion-view>
</body>
</html>


module & controller :
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})

.controller('PostController', ['$scope', '$http', function($scope, $http) {

$scope.postForm = function() {

var encodedString = 'username=' +
encodeURIComponent($scope.inputData.username) +
'&password=' +
encodeURIComponent($scope.inputData.password);

$http({
method: 'POST',
url: 'check-login.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data, status, headers, config) {
console.log(data);
if ( data.trim() === 'correct') {
window.location.href = 'home.html';
} else {
$scope.errorMsg = "Login not correct";
}
})
.error(function(data, status, headers, config) {
$scope.errorMsg = 'Unable to submit form';
})
}

}]);


php file :

<?php
if ( $_POST['username'] === 'Test' &&
$_POST['password'] === '1234' ) {
echo 'correct';
} else {
echo 'wrong';
}

?>

Answer

Try by making () after function in ng-click like this :

<button class="button button-full button-balanced" ng-click="postForm()">Sign In</button>

Let me know.

Comments