Binding not working using angular on Ionic - angularjs

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
}

Related

LocalStorage fire twice to store Object

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.

How to do login with hardcored data?

I have two text fields named username, password and a hard coded array of objects with userdata:
<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>
And I have an array of object
$scope.userdata = [
{username:"vipin",password:"sddfds"},
{username:"vineeth",password:"vdsf"},
{username:"vishnu",password:"sdfsdfsd"}
];
How do I login?
Try this :
Login.html
<form ng-submit="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>
And Controller
function ctrl($scope) {
$scope.userdata = [{
username: "vipin",
password: "sddfds"
}, {
username: "vineeth",
password: "vdsf"
}, {
username: "vishnu",
password: "sdfsdfsd"
}];
$scope.submitLogin = function() {
var addToArray=false;
for(var i=0;i<$scope.userdata.length;i++){
if($scope.userdata[i].username===$scope.loginData.username && $scope.userdata[i].password===$scope.loginData.password){
addToArray=true;
}
}
if(addToArray == true)
{
alert("login Sucessfull.!");
}
else
{
alert("invalid.!");
}
};
}
Here is the codepen Link: http://codepen.io/anon/pen/BKBpVd
<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" ng- click=”login()”>Log in</button>
</label>
JavaScript Code
$scope.userdata=[{username:"vipin",password:"sddfds"}, {username:"vineeth",password:"vdsf"},{username:"vishnu",password:"sdfsdfsd"}];
$scope.login=function(){
var login=0;
for(var i=0;i<$scope.userdata.length;i++)
{
If($scope.loginData.password==$scope.userdata[i].password && $scope.loginData.username==$scope.userdata[i].username){
login=1
}
If(login==1)
{
alert(“login successfully”);
}
}

How to get value of ng-model used in radio?

How to access checked checkbox value in controller?
Here radio buttons array fill many radio buttons.
<label class="item item-input" ng-show="item.types !=''">
<div ng-repeat="type in item.types" style="margin-left:5px;">
<label class="item item-radio">
<input type="radio" name="group" ng-model="param.type">
<div class="item-content">
{{type.name}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</label>
And Controller code
$scope.addItem = function(params) {
alert(params.type);
};
Given that you didn't post the rest of your controller code, I can't say for sure that this is the problem (or your only problem), but I suspect that changing ng-model to type and changing params.type to $scope.type in your addItem function would do the trick. Like so:
<label class="item item-input" ng-show="item.types !=''">
<div ng-repeat="type in item.types" style="margin-left:5px;">
<label class="item item-radio">
<input type="radio" name="group" ng-model="type">
<div class="item-content">
{{type.name}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</label>
And in your controller:
$scope.addItem = function(params) {
alert($scope.type);
};

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