im having problem for $http.get to retrieve json from input fields value from view. heres my code
My form
<div class="container">
<div class="col">
<div class="app-logo"><img src="img/logo.svg"></div>
<div class="list list-inset removePM">
<label class="item item-input">
<input type="text" ng-model="user.username" placeholder="NRIC" >
</label>
<label class="item item-input">
<input type="password" ng-model="user.password" placeholder="Password" > </label>
</div>
<div class="loginButton"><button class="button ion-unlocked button-block button-balanced custom-button" ng-click="login(user);"> Login </button> </div>
</div>
My controller
angular.module('starter.controllers', [])
.controller('LoginCtrl', function($scope, LoginService,
$ionicPopover, $timeout, $location, $ionicPopup, Profiles){
$scope.login = function (user) {
Profiles.grab(user);
};
})
My Services
.factory('Profiles', function($http, $location, sessionService, $window, LoginService) {
var profiles = {content:null};
$http.get('http://192.168.0.113/soap-request/soap.php?username='+ user.username +'&password=' + user.password +'').success(function(data) {
profiles.content = data;
return true;
});
grab: function(data, $http) {
return profiles;
}
});
Related
I'm trying to create a user and register him with firebase/angularfire, i think i'm following the angularfire documentation but i have "createUserWithEmailAndPassword failed: First argument "email" must be a valid string." message.
enter code here
<ion-view>
<ion-content padding="false">
<div class="list list-inset">
<label class="item item-input">
<input type="text" ng-model="email" placeholder="e-mail">
</label>
<label class="item item-input">
<input type="text" ng-model="password" placeholder="Password">
</label>
</div>
<div class="item item-divider text-center">
<a href="" class="button button-positive button-small" ng-click="createUser()">
Enregistrez
</a>
</div>
</ion-content>
</ion-view>
'use strict';
app
.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
console.log("factory");
return $firebaseAuth();
console.log("factory");
}
])
.controller('homepageIndex',function($scope){
})
.controller('homepageSignUp', ['$scope', 'Auth', function($scope, Auth) {
$scope.createUser = function() {
// Create a new user
Auth.$createUserWithEmailAndPassword($scope.email, $scope.password)
.then(function(firebaseUser) {
}).catch(function(error) {
console.log("error");
});
};
}
]);
if it can help somebody i found the way like this, i dont know if it's the best way:
<ion-view>
<ion-content padding="false">
<div class="list list-inset">
<label class="item item-input">
<input type="text" ng-model="newUser.email" placeholder="e-mail">
</label>
<label class="item item-input">
<input type="text" ng-model="newUser.password" placeholder="Password">
</label>
</div>
<div class="item item-divider text-center">
<a href="" class="button button-positive button-small" ng-click="registerUser(newUser)">
Enregistrez
</a>
</div>
</ion-content>
</ion-view>
'use strict';
app.factory("Auth", ["$firebaseAuth",
function ($firebaseAuth) {
return $firebaseAuth();
}
]);
app.controller('homepageIndex', function ($scope) {
});
app.controller('homepageSignUp', ['$scope', 'Auth', function ($scope, Auth) {
var newUser = $scope.newUser = { email: "", password: "" };
$scope.registerUser = function () {
Auth.$createUserWithEmailAndPassword(newUser.email, newUser.password)
.then(function (firebaseUser) {
console.log("yas", firebaseUser);
}).catch(function (error) {
console.log("error");
});
};
}
]);
HTML
<form id="newSaveForm">
<div class="item">
<div class="list">
<label class="item item-input">
<input type="date" ng-model="dateSave" placeholder="Date" required>
</label>
</div>
<div class="list">
<label class="item item-input">
<input type="number" ng-model="moneySave" placeholder="Deposit?" required>
</label>
</div>
<button class="button button-block button-balanced ion-android-checkbox-outline" data-ng-click="addMoney(dateSave,moneySave)" ng-disabled="buttonDisabled"> Save </button>
</div>
</form>
JavaScript
.controller('saveCtrl', function($scope, $state, $http, $filter) {
getAll();
$scope.addMoney = function(tgl, jml) {
$scope.buttonDisabled = true;
$http.post("http://localhost/mymoney/insert.php?jml=" + jml + "&tgl=" + conv_date(tgl)).success(function(response) {
getAll();
$scope.dateSave = "";
$scope.moneySave = "";
console.log('Success Insert');
}).finally(function() {
$scope.buttonDisabled = false;
});
};
function getAll() {
$http.get("http://localhost/mymoney/deposit.php")
.then(function(response) {
$scope.listDeposit = response.data.records;
});
};
function conv_date(tgl) {
return $filter('date')(tgl, 'yyyy-MM-dd');
};
});
Why when I click addMoney function twice I get 2 results in one time
I'm trying to save the data from a form, which is in a modal, to local storage. But, for some reason, the data is coming up blank.
For example, when I get the data, it returns this:
, , , , ,
instead of this:
Name, Email, Year, Major, Phone#
So, it seems like it is saving a blank entry. I'm very new to AngularJS so I can't figure out how to fix it. If anyone could help me out that would be amazing!
controllers.js
angular.module('starter.controllers', [])
.controller('AppController',['$scope', 'getLocalStorage', '$ionicModal', function ($scope, getLocalStorage, $ionicModal) {
$scope.todos = getLocalStorage.getTodos();
$scope.clearSelected = function () {
$scope.todos = $scope.todos.filter(function (item) {
return !item.selected;
});
getLocalStorage.updateTodos($scope.todos);
};
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal;
}, {
animation: 'slide-in-up',
focusFirstInput: true
});
}])
.controller('ModalCtrl', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
$scope.todos = getLocalStorage.getTodos();
$scope.addTodo = function () {
$scope.todos.push(
{'name': $scope.name,
'email': $scope.email,
'year': $scope.year,
'major': $scope.major,
'phone': $scope.phone,
'selected': false});
$scope.modal.hide();
getLocalStorage.updateTodos($scope.todos);
};
}])
.controller('InfoCtrl', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
$scope.todos = getLocalStorage.getTodos();
}
]);
services.js
angular.module('starter.services', [])
var storageService = angular.module('storageService', []);
storageService.factory('getLocalStorage', function () {
var todoList = {};
return {
list: todoList,
updateTodos: function (todosArr) {
if (window.localStorage && todosArr) {
localStorage.setItem("todos", angular.toJson(todosArr));
}
//update the cached version
todoList = todosArr;
},
getTodos: function () {
todoList = angular.fromJson( localStorage.getItem("todos") );
return todoList ? todoList : [];
}
};
})
html
<ion-view view-title="TechProf">
<ion-content>
<button class="button button-full button-positive" ng-click="modal.show()">OPen Modal</button>
<ion-list>
<h3>List</h3>
<ul class="list">
<li ng-repeat="s in todos" class="item">
<input ng-model="s.selected" type="checkbox" />
<span ng-class="{'selected': todo.selected}">{{ s.name }}, {{ s.email }}, {{ s.year }},{{ s.major }}, {{ s.phone }}</span>
</li>
</ul>
<button class="button button-full button-positive" ng-click="clearSelected()">Delete Selected</button>
</ion-list>
</ion-content>
<script id="modal.html" type="text/ng-template">
<div class="modal" ng-controller="ModalCtrl">
<header class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</header>
<ion-content has-header="true">
<form name="frm" ng-submit="addTodo()">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="name" required>
</label>
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="email" required>
</label>
<label class="item item-input item-select">
<div class="input-label">Year</div>
<select ng-model="year" required>
<option selected>Freshman</option>
<option >Sophmore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</label>
<label class="item item-input">
<input type="text" placeholder="Major" ng-model="major" required>
</label>
<label class="item item-input">
<input type="number" placeholder="Phone" ng-model="phone" ng-minlength="10" required>
</label>
<button class="button button-full button-positive" ng-disabled="frm.$invaild">Submit</button>
</div>
</form>
</ion-content>
</div>
</script>
</ion-view>
Working Plunker
ngModel
One of the keys to getting this is move all of the form inputs ng-model point to an object.property like this answer suggests.
Basically that means you need to do something like this for your HTML inputs:
<input type="text" ng-model="info.name">
And put this in your controller:
$scope.info = {};
Because of the ngModel you'll need to change the $scope.addTodo function. While you're at it you can also reset the form data on submit by adding $scope.info = {};.
$scope.addTodo = function() {
$scope.todos.push($scope.info);
$scope.modal.hide();
getLocalStorage.updateTodos($scope.todos);
$scope.info = {};
};
You can also move it from ModalCtrl to your AppController because you won't need the ModalCtrl anymore.
Modal Scope
Add scope: $scope to your modal so it uses the scope from your AppController.
Like this:
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
});
Remove
Remove the ModalCtrl controller and the ng-controller="ModalCtrl" from your HTML.
In services.js remove this (it's unnecessary):
var storageService = angular.module('storageService', []);
storageService
Change
In your getLocalStorage factory, change this var todoList = {} to this var todoList = [] because you want an array of objects so you need to start with an array.
In your modal's HTML change <ion-content has-header="true"> to <ion-content class="has-header"> as suggested by Ionic.
I have a very simple form template and controller. But i'm unable to call a function from within the onSubmit scope function. Controller is:
angular
.module('myApp')
.controller('registerUserCtrl', registerUserCtrl);
function registerUserCtrl($scope, $location, $window, authenticationService, $http, vcRecaptchaService){
$scope.pageHeader = {
title: 'Register',
};
$scope.register = function (data) {
console.log('in scope.register ');
userService.register(data)
.success(function(data) {
console.log('setting to true.....');
authenticationService.isLoggedIn = true;
authenticationService.user = data.user;
authenticationService.token = data.token;
$location.path("/");
}).error(function(status, data) {
console.log(status);
console.log(data);
$scope.formError = "This email has already been taken";
});
}
$scope.onSubmit = function () {
console.log('in onSubmit');
//N.B. Need to veriify this
var response = vcRecaptchaService.getResponse();
$scope.formError = "";
if(!$scope.formData || !$scope.formData.email || !$scope.formData.password) {
$scope.formError = "All fields required, please try again";
return false;
} else {
console.log('$scope is ');
console.log($scope);
$scope.register($scope.formData);
}
};
}
And template is:
<div id="register-wrapper">
<form class="form-horizontal" role="form" ng-submit="onSubmit()">
<div role="alert" ng-show="formError" class="alert alert-danger">{{ formError }}</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-4 control-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" ng-model="formData.email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-4 control-label">Password</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="formData.password">
</div>
</div>
<div vc-recaptcha key="'6Lf6aQsTAAAAAACdCxN2FqHHKpz0RyF9jMJsn6h4'"></div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-10">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
</div>
I always end up with:
undefined is not a function
at the $scope.register($scope.formData); line. I've done this many times before, but somehow now its not working...
You need to inject userSevice in your controller as dependency
angular
.module('myApp')
.controller('registerUserCtrl', registerUserCtrl);
function registerUserCtrl($scope, $location, $window, authenticationService,
$http, vcRecaptchaService, userSevice)
{
I have three linked lists you need to work a bit like a cascading drop-down lists, that is, when you select an item in the first list, the second filter, which filters the third.
i need same like this.[http://jsfiddle.net/benfosterdev/dWqhV/][1]
In this example all data is added static, but i need to add dynamic using module crud in meanjs.
categories controller:
angular.module('categories').controller('CategoriesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Categories',
function($scope, $stateParams, $location, Authentication, Categories) {
$scope.authentication = Authentication;
// Create new Category
$scope.create = function() {
// Create new Category object
var category = new Categories ({
name: this.name
});
// Redirect after save
category.$save(function(response) {
$location.path('categories/' + response._id);
// Clear form fields
$scope.name = '';
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
}
]);
create categories:
<section data-ng-controller="CategoriesController">
<div class="page-header">
<h1>New Category</h1>
</div>
<div class="col-md-12">
<form class="form-horizontal" data-ng-submit="create()" novalidate>
<fieldset>
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default">
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>