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
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
}
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
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)
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>
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