LocalStorage fire twice to store Object - angularjs

I am try to store an object into LocalStorage, but when I triggersetItem, its store two objects (duplicate). Below are my codes;
html
<form class="clearBoth" ng-submit="addProject(projectInfo)">
<div class="list" ng-model="projectInfo">
<label class="item item-input item-stacked-label">
<span class="input-label">Project Name</span>
<input type="text" ng-model="projectInfo.name" placeholder="PSN" required>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Host</span>
<input type="text" ng-model="projectInfo.host" placeholder="http://psn.com.my" required>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Instance</span>
<input type="text" ng-model="projectInfo.instance" placeholder="PSN" required>
</label>
</div>
<button class="button button-block button-positive" ng-click="addProject(projectInfo)">Block Button</button>
<button class="button button-block button-assertive" ng-click="removeProject()">Block Button</button>
</form>
controller
.controller("ProjectAddCtrl", function($scope) {
$scope.addProject = function (projectInfo) {
var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
$scope.projects = [{
name: "",
host: "",
instance: ""
}];
oldItems.push(projectInfo);
localStorage.setItem('itemsArray', JSON.stringify(oldItems));
};
$scope.removeProject = function () { localStorage.clear(); };
console.log(JSON.parse(localStorage.getItem('itemsArray')));
})

Both ng-click on the <button> and ng-submit on the <form> are being triggered and hence, you are seeing the same data being added twice. You can fix it by adding type="button" attribute on the first button.
Check documentation - the default value for the type attribute is submit and hence, both the click and submit events are being fired.

Related

Binding not working using angular on Ionic

I'm using angular to populate a form, which can be edited. But the edits are not being captured by the scope variables.
Here's my code:
HTML code:
<div class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<span>{{name}}</span>
</label>
<label class="item item-input">
<span class="input-label">Locality</span>
<span>{{locality}}</span>
</label>
<label class="item item-input">
<span class="input-label">City</span>
<span>{{city}}</span>
</label>
<label class="item item-input">
<span class="input-label">Amenities</span>
<input type="text" placeholder="Amenities" ng-model="amenities">
</label>
<label class="item item-input">
<span class="input-label">Total Rooms</span>
<input type="text" placeholder="Total Rooms" ng-model="trooms">
</label>
</div>
<div class="text-center">
<button class="button button-positive" ng-click="hotelUpdate()">
Save Edits
</button>
</div>
hotelUpdate() :
$scope.hotelUpdate = function() {
var hotel1 = {
objectId: $state.params.hotelId,
amenities: $scope.amenities,
free_rooms: $scope.frooms,
total_rooms: $scope.trooms
}
Backendless.Data.of( "Hotels" ).save(hotel1)
.then(function(savedObject){
console.log(savedObject);
})
.catch(function(error){
console.log(error);
})
}
}
Is there something wrong with the code? On using binding previously the same way, it has worked fine.
Before the function cal,declare a scope variable $scope.hotel = {},
In HTML code,change ng-model like ng-model = "hotel.amenities",
In controller,change the code to
var hotel1 = {
objectId: $state.params.hotelId,
amenities: $scope.hotel.amenities,
free_rooms: $scope.hotel.frooms,
total_rooms: $scope.hotel.trooms
}

How to make Ionic app user login?

I have two text box for username and password, when each user enter data it should send to api. how can i make it work.
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<p style="text-align:center"ng-hide=myflag>wrong credentials</P>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
You should read through the angular documentation for forms.
https://docs.angularjs.org/guide/forms
Here's a quick example of a template + controller.
html
<form action="submitLogin()">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<p style="text-align:center"ng-hide=myflag>wrong credentials</P>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</form>
controller
var example_app = angular.module("example_app ", []);
example_app.controller("LoginController", ['$scope', '$http', function($scope, $http) {
$scope.loginData = {};
$scope.submitLogin= function(){
var res = $http.post('http://login.com/postLogin', loginData);
res.success(function(data, status, headers, config) {
$scope.message = data;
// go to authorized page
});
res.error(function(data, status, headers, config) {
alert( "failure message: " + JSON.stringify({data: data}));
});
};
}]);
Documentation doesn't show the action= functionality, but shows a ng-click on the submit button instead. Both work fine.
Edit:
Was going to mention, but forgot to, that you should try to use angular services for instead of using $http directly in your controller.
https://docs.angularjs.org/guide/services
https://github.com/johnpapa/angular-styleguide

Ionic $scope.function only firing once, then giving error on new clicks

Last week I made a function that takes a true/false value out of a pair of buttons (one for true, one for false) and puts it into a $scope variable.
It worked perfectly.
$scope.trueOrFalse = function(truefalse) {
if (truefalse == false){
$scope.value = false;
document.getElementById("makeFalse").className = "button active";
document.getElementById("makeTrue").className = "button";
console.log($scope.isBusiness);
} else if(truefalse == true){
$scope.value = true;
document.getElementById("makeTrue").className = "button active";
document.getElementById("makeFalse").className = "button";
console.log($scope.value);
}
}
But now, I have basically the same exact thing in another page, and its only working once, on the first click, where, if the chosen value is false, I get a console.log that it is false, then nothing happen if clicked again, to change the value.
But if the value chosen is true, then when the next click is attempted, I start to get:
TypeError: fn is not a function
at $parseFunctionCall (ionic.bundle.js:21045);
at ionic.bundle.js:53458;
at Scope.$get.Scope.$eval (ionic.bundle.js:23100);
at Scope.$get.Scope.$apply (ionic.bundle.js:23199);
at HTMLAnchorElement.<anonymous> (ionic.bundle.js:53457);
at HTMLAnchorElement.eventHandler (ionic.bundle.js:11713);
at triggerMouseEvent (ionic.bundle.js:2863);
at tapClick (ionic.bundle.js:2852);
at HTMLDocument.tapMouseUp (ionic.bundle.js:2925);
What's going on here?
Here's the HTML
<ion-view view-title="Biz Post/Uploading">
<ion-content>
<!-- Begin Second Set of Tabs -->
<div class="button-bar">
<a class="button" id="item" data-ng-click="isDeal(false)">Item</a>
<a class="button" id="deal" data-ng-click="isDeal(true)">Deal</a>
</div>
<!-- End Second Set of Tabs -->
<!-- Section -->
<div class="list-inset">
<center><img src="http://placehold.it/350x150"></center>
</div>
<div class="list">
<div class="item item-divider">
Add thing
</div>
<label class="item item-input item-stacked-label">
<span class="input-label">thing</span>
<input type="text" placeholder="add location" ng-model="thing.thing2">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">thing</span>
<input type="text" placeholder="add price" ng-model="thing.thing3">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">thing</span>
<input type="text" placeholder="add item description" ng-model="item.thing">
</label>
<label class="item item-input">
<span class="input-label">Date</span>
<input type="date">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">thing</span>
<input type="text" placeholder="set limit" ng-model="thing.thing4">
</label>
<button class="button button-full button-balanced" data-ng-click="pushData()">
push data
</button>
</div>
</ion-content>
</ion-view>
With ng-class the code would look like this:
http://plnkr.co/edit/6sOzUmAcIzVjLEOL9Jva?p=preview
<div ng-controller="MainCtrl">
<button id="makeTrue" ng-class="{button :true, active: truefalse}" ng-click="truefalse = !truefalse">Make true</button>
<button id="makeFalse" ng-class="{button :true, active: !truefalse} " ng-click="truefalse = !truefalse">Make false</button>
</div>
In controller: $scope.truefalse = true;. If truefalse is true, then makeTrue has the active class (that seems a bit off, but it's the same in your code), otherwise makeFalse is active.
This way you're not playing with the DOM in your controller(which should be avoided).And your $scope is less cluttered.
For the ng-click you can define a function on $scope and call it instead of changing truefalse in an expression (but that's up to you)

Angularjs input field is getting stuck on typing in google chrome

I have 4 fields in a form firstname,lastname,email,phone
when i start typing on email and phone field the form gets stuck in Google chrome browser(keyboard typing and mouse click on form section stops working but outside form everything eg:tabs are working), but when i try with Firefox there is no problem.
I tried in Google chrome by removing firstname field now the error occurs only in phone field. likewise when i remove lastname field there was no error.
In general only the first 2 fields are working 3rd field onwards its showing error.
How can i sole this issue.
.controller('AccountCtrl', function($scope) {
$scope.usr = {"firstname":"","lastname":"","umail":"","uphone":"","location":["",""]};
if(localStorage.getItem('appusr')!==null){
$scope.usr = JSON.parse(localStorage.getItem('appusr'));
console.log($scope.usr);
}
$scope.saveUserDetails = function(){
if($scope.usr.location[0]==""){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
$scope.$apply(function(){
$scope.usr.location = [position.coords.latitude,position.coords.longitude];
});
});
}
}
console.log($scope.usr);
localStorage.setItem("appusr",JSON.stringify($scope.usr));
}
});
<form ng-submit="saveUserDetails()" name="form" validate>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text" ng-model="usr.firstname" placeholder="John">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text" ng-model="usr.lastname" placeholder="Suhr">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>{{usr.email}}
<input type="email" ng-model="usr.umail" name="umail" placeholder="john#suhr.com">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Phone</span>
<input type="text" ng-model="usr.uphone" placeholder="9999999999">
</label>
<button type="submit" class="button button-full button-positive"><i class="icon ion-person-add"></i> Update </button>
</div>
</form>

How can I pass array from form using angularJs?

I have registration form and I have to pass the data in this format, till "LastName" I am able to send the data, but I am facing the issue to send the "Address" because there is one more array inside array. I tried lots of method search from google but not able to do.
{
'Password':'125125',
'EmailAddress':'test3#gugus.xfx.ch',
'FirstName':'David3',
'LastName':'Hirst3',
'Address':{
'Address1':'Unit 4',
'Address2':'1465 Gold Coast Hwy',
'State':'QLD',
'Suburb':'BBurleigh Heads',
'Postcode':'4220'
}
}
Please tell me how can I send this formdata with angularJs......
Here is the solution....
Here is my html code....
registration.html
<div class="list list-inset">
<label class="item item-input item-icon-left">
<i class="icon ion-android-note"></i>
<input type="text" placeholder="Address1*" name = "Address1" ng-module = "formdata.Address.Address1">
</label>
<label class="item item-input item-icon-left">
<i class="icon ion-android-note"></i>
<input type="text" placeholder="Address2*" name = "Address2" ng-module = "formdata.Address.Address1">
</label>
<label class="item item-input item-icon-left">
<i class="icon ion-android-note"></i>
<input type="text" placeholder="State*" name = "State" ng-module = "formdata.Address.State">
</label>
<label class="item item-input item-icon-left">
<i class="icon ion-android-note"></i>
<input type="text" placeholder="Suburb*" name = "Suburb" ng-module = "formdata.Address.Suburb">
</label>
<label class="item item-input item-icon-left">
<i class="icon ion-ios7-location"></i>
<input type="text" placeholder="Post Code*" name = "PostCode" ng-module = "formdata.Address.PostCode">
</label>
<div>
controller.js
ctrl.controller('clinicCtrl', function($scope, $state, $window, api, $ionicLoading) {
$scope.formData = {};
});
So, now I am getting the same format which one I want......
You need to have array of objects.You you need to wrap the Address object with []
var data = {
'Password':'125125',
'EmailAddress':'test3#gugus.xfx.ch',
'FirstName':'David3',
'LastName':'Hirst3',
'Address':[{
'Address1':'Unit 4',
'Address2':'1465 Gold Coast Hwy',
'State':'QLD',
'Suburb':'BBurleigh Heads',
'Postcode':'4220'
}]
};
for Address
$scope.data = data.Address;
Fiddle
Try this:
{
'Password':'125125',
'EmailAddress':'test3#gugus.xfx.ch',
'FirstName':'David3',
'LastName':'Hirst3',
'Address':[{
'Address1':$scope.formData.Address1,
'Address2':$scope.formData.Address2,
'State':...,
'Suburb':...,
'Postcode':...
}]
}
Also I think you have a problem with your html
You should change ng-module to ng-model
From:
<input type="text" placeholder="Address1*" name = "Address1" ng-module = "formdata.Address.Address1">
To:
<input type="text" placeholder="Address1*" name = "Address1" ng-model = "formdata.Address.Address1">
This should work

Resources