how to clear data in modal view of ionic - ionic-framework

I have tried a lot of things to clear the input fields in ionic modal. It has already been more than two days I have been searching for the solution. Can anyone provide me the solution? I have only included the necessary parts.
controller.js
.controller('ClientCtrl', ['$scope', '$ionicModal', function($scope, $ionicModal) {
//I have retrieved data form local storage
//$scope.clients contains the data
//client add modal
$ionicModal.fromTemplateUrl('templates/clientAdd.html', {
scope: $scope
}).then(function(modal) {
$scope.clientAdd = modal;
});
// Triggered in the client add modal to close it
$scope.closeClientAddForm = function() {
$scope.clientAdd.hide();
};
// Open the client add modal
$scope.clientAddForm = function() {
$scope.clientAdd.show();
};
}])
.controller('ClientAddCtrl', ['$scope', '$state', function($scope, $state) {
//$scope.client = null;
$scope.client = {};
$scope.addClientData = function(clientData) {
$scope.clientinfo = clientData;
//operation to store data
/* $scope.clearForm = function() {
var client = {
companyName: "",
address: "",
contactName: "",
contactEmail: "",
contactPhone: "",
shippingName: "",
shippingAddress: ""
}
$scope.clientAddForm.$setPristine();
$scope.client = angular.copy(client);
}*/
$scope.closeClientAddForm();
}
}])
modal
<ion-modal-view cache-modal-view="false" ng-controller="ClientAddCtrl">
<ion-header-bar class="bar bar-dark">
<h1 class="title">Client Details</h1>
<div class="buttons">
<button class="button button-assertive" ng-click="closeClientAddForm()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form name="clientAddForm" ng-submit="addClientData(client)" novalidate>
<ion-list>
<div class="padding item-divider">
BILLING DETAILS
</div>
<label class="item item-input">
<span class="input-label">Name <span class="style_error">*</span></span>
<input name="companyName" type="text" ng-model="client.BillingDetails.companyName" required>
</label>
<p class="style_error" ng-show="clientForm.companyName.$dirty && clientForm.companyName.$invalid">Company name is required.</p>
<label class="item item-input">
<span class="input-label">Address 1 <span class="style_error">*</span></span>
<input name="address" type="text" ng-model="client.BillingDetails.address" required>
</label>
<p class="style_error" ng-show="clientForm.address.$dirty && clientForm.address.$invalid">Address is required.</p>
<label class="item item-input">
<span class="input-label">Address 2 </span>
<input name="address2" type="text" ng-model="client.BillingDetails.address2">
</label>
<div class="padding item-divider">
CONTACT DETAILS
</div>
<label class="item item-input">
<span class="input-label">Name <span class="style_error">*</span></span>
<input name="contactName" type="text" ng-model="client.ContactDetails.contactName" required>
</label>
<p class="style_error" ng-show="clientForm.contactName.$dirty && clientForm.contactName.$invalid">Name is required.</p>
<label class="item item-input">
<span class="input-label">Email <span class="style_error">*</span></span>
<input name="contactEmail" type="email" ng-model="client.ContactDetails.contactEmail" required>
</label>
<p class="style_error" ng-show="clientForm.contactEmail.$dirty && clientForm.contactEmail.$invalid">Enter a valid email</p>
<label class="item item-input">
<span class="input-label">Phone <span class="style_error">*</span></span>
<input name="contactPhone" type="number" ng-model="client.ContactDetails.contactPhone" required>
</label>
<p class="style_error" ng-show="clientForm.contactPhone.$dirty && clientForm.contactPhone.$invalid">Phone is required.</p>
<label class="item item-input">
<span class="input-label">Mobile </span>
<input name="contactMobile" type="number" ng-model="client.ContactDetails.contactMobile">
</label>
<label class="item item-input">
<span class="input-label">Fax </span>
<input name="contactFax" type="number" ng-model="client.ContactDetails.contactFax">
</label>
<label class="item item-input">
<span class="input-label">Website </span>
<input name="contactWebsite" type="text" ng-model="client.ContactDetails.contactWebsite">
</label>
<div class="padding item-divider">
SHIPPING DETAILS
</div>
<label class="item item-input">
<span class="input-label">Name <span class="style_error">*</span></span>
<input name="shippingName" type="text" ng-model="client.ShippingDetails.shippingName" required>
</label>
<p class="style_error" ng-show="clientForm.shippingName.$dirty && clientForm.shippingName.$invalid">Shipping name is required.</p>
<label class="item item-input">
<span class="input-label">Address 1 <span class="style_error">*</span></span>
<input name="shippingAddress" type="text" ng-model="client.ShippingDetails.shippingAddress" required>
</label>
<p class="style_error" ng-show="clientForm.shippingAddress.$dirty && clientForm.shippingAddress.$invalid">Shipping Address is required.</p>
<label class="item item-input">
<span class="input-label">Address 2 </span>
<input name="shippingAddress2" type="text" ng-model="client.ShippingDetails.shippingAddress2">
</label>
<div class="padding item-divider">
NOTES
</div>
<ion-item>
<textarea placeholder="notes" name="shippingNotes" ng-model="client.notes" style="width:100%">
</textarea>
</ion-item>
</ion-list>
<button class="button button-block button-positive" type="submit" ng-disabled="clientAddForm.$invalid" >Add Client</button>
</form>
</ion-content>
</ion-modal-view>

Please read and try below link.
https://forum.ionicframework.com/t/clear-button-to-clear-all-fields/12190

Related

Android not able to save data to firebase and localstorage not working

controller.js
angular.module('starter.controllers', ['ionic','ngCordova','forceng'])
// LocalStorage
.controller('warehouseCtrl', ['$scope', '$stateParams', 'reservationService',
function ($scope, $stateParams, reservationService) {
$scope.warehouse =[];
// list all data from Reservation.json
reservationService.all().then(function(warehouseArray){
for (var i = 0; i <warehouseArray.length; i++){
p={"warehouse":warehouseArray[i].warehouse,
"Price":warehouseArray[i].Price
};
$scope.warehouse.push(p);
}
})
}])
// Reservation submit button
.controller('submitCtrl', ['$scope', '$stateParams', '$http','fireBaseService' ,'$localStorage',
function($scope, $stateParams, $http, fireBaseService, $localStorage){
$scope.reservation = {"name": null, "ic": null, "email":null, "phone":null, "address":null, "warehouse":null, "startDate": new Date(), "endDate": new Date, "remark":null};
$scope.submit = function(){
console.log($scope.reservation.name, $scope.reservation.ic, $scope.reservation.email, $scope.reservation.phone, $scope.reservation.address, $scope.reservation.warehouse, $scope.reservation.startDate, $scope.reservation.endDate, $scope.reservation.remark);
fireBaseService.signinUser();
fireBaseService.save($scope.reservation.name, $scope.reservation.ic, $scope.reservation.email , $scope.reservation.phone, $scope.reservation.address, $scope.reservation.warehouse, $scope.reservation.startDate.toLocaleDateString("en-US"), $scope.reservation.endDate.toLocaleDateString("en-US"), $scope.reservation.remark);
$scope.reservation = {"name": null, "ic": null, "email":null, "phone":null, "address":null, "warehouse":null, "startDate": new Date(), "endDate": new Date, "remark":null};
}
}
])
services.js
angular.module('starter.services', ['ngStorage'])
// Reservation Service
.factory('reservationService', ['$http',
function($http) {
var reservation = [];
return {
all: function(){
return $http.get('Reservation.json').then(function(response){
reservation = response.data;
return reservation;
});
},
}
}])
//firebase service
.factory('fireBaseService', [ '$localStorage',
function($localStorage){
var config = {
apiKey: "AIzaSyA41FxVS8TFpO_s5aIXFhmX5s9Pz88z5Wc",
authDomain: "emob-823c4.firebaseapp.com",
databaseURL: "https://emob-823c4.firebaseio.com",
storageBucket: "emob-823c4.appspot.com",
messagingSenderId: "1092245519317"
};
firebase.initializeApp(config);
// Get a reference to the database service
var database = firebase.database();
$storage = $localStorage.$default({
firebaseArray: []
});
return{
createUser: function(){
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(error.code, error.message);
});
},
signinUser: function(){
firebase.auth().signInWithEmailAndPassword('xxx#gmal.com', '123').catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(error.code, error.message);
});
},
signoutUser: function(){
firebase.auth().signOut().then(function() {
console.log('Sign out successful');
}, function(error) {
console.log(error);
});
},
save: function(name, ic, email , phone, address, warehouse, startDate, endDate, remark){
firebase.database().ref('registration/' + ic).set({
name: name,
ic: ic,
email: email,
phone: phone,
address: address,
warehouse: warehouse,
startDate: startDate,
endDate: endDate,
remark: remark
});
}
}
}])
;
tab-reservation.html
<!--<div class="list card">
<div class="item item-avatar">
<img src="img/register.png">
<h2>Customer Reservation/ Booking</h2>
<p>Application for to make a reservation or advancement booking for customers.</p>
</div>
<div class="item item-image">
<p>Reservation/Booking Form</p>
<form class="reservation">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-ios-personadd placeholder-icon"></i> <input type="text" ng-model="reservation.name" placeholder="Name">
</label>
<label class="item item-input">
<i class="icon ion-ios-infinite placeholder-icon"></i> <input type="text" ng-model="reservation.ic" placeholder="IC/Passport Number">
</label>
<label class="item item-input">
<i class="icon ion-ios-email placeholder-icon"></i> <input type="email" ng-model="reservation.email" placeholder="Email">
</label>
<label class="item item-input">
<i class="icon ion-iphone placeholder-icon"></i> <input type="text" ng-model="reservation.phone" placeholder="Phone Number">
</label>
<label class="item item-input">
<i class="icon ion-location placeholder-icon"></i>
<input type="text" ng-model="reservation.address" placeholder="Address" />
</label>
<label class="item item-input">
<i class="icon ion-android-home placeholder-icon"></i>
<select ng-model="reservation.warehouse" ng-controller="warehouseCtrl" ng-options="w.warehouse as w.warehouse for w in warehouse" />
</label>
<br>
<label class="item item-input">
<i class="icon ion-ios-calendar placeholder-icon"></i>
<input type="date" ng-model="reservation.startDate" placeholder="Warehouse Booking Start Date" />
</label>
</div>
</form>
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>-->
<div class="list card">
<div class="item item-avatar">
<img src="img/register.png">
<h2>Customer Reservation/ Booking</h2>
<p>Application for to make a reservation or advancement booking for customers.</p>
</div>
<div class="item item-body">
<p>Reservation/Booking Form</p>
<form class="reservation" ng-controller="submitCtrl">
<label class="item item-input">
<i class="icon ion-ios-personadd placeholder-icon"></i> <input type="text" ng-model="reservation.name" placeholder="Name">
</label>
<label class="item item-input">
<i class="icon ion-ios-infinite placeholder-icon"></i> <input type="text" ng-model="reservation.ic" placeholder="IC/Passport Number">
</label>
<label class="item item-input">
<i class="icon ion-ios-email placeholder-icon"></i> <input type="email" ng-model="reservation.email" placeholder="Email">
</label>
<label class="item item-input">
<i class="icon ion-iphone placeholder-icon"></i> <input type="text" ng-model="reservation.phone" placeholder="Phone Number">
</label>
<label class="item item-input">
<i class="icon ion-location placeholder-icon"></i>
<input type="text" ng-model="reservation.address" placeholder="Address" />
</label>
<label class="item item-input">
<i class="icon ion-android-home placeholder-icon"></i>
<select ng-model="reservation.warehouse" ng-controller="warehouseCtrl" ng-options="w.warehouse as w.warehouse for w in warehouse"><option value="" disabled selected>Select your warehouse option</option></select>
</label>
<label class="item item-input">
<i class="icon ion-ios-calendar placeholder-icon"></i>
<!--<input type="text" ng-model="reservation.startDate" placeholder="Warehouse Booking Start Date" onfocus="(this.type='date')"/>-->
<input type="date" ng-model="reservation.startDate" placeholder="Warehouse Booking Start Date" />
</label>
<label class="item item-input">
<i class="icon ion-ios-calendar-outline placeholder-icon"></i>
<!--<input type="text" ng-model="reservation.endDate" placeholder="Warehouse Booking End Date" onfocus="(this.type='date')"/>-->
<input type="date" ng-model="reservation.endDate" placeholder="Warehouse Booking End Date"/>
</label>
<label class="item item-input">
<i class="icon ion-checkmark-circled placeholder-icon"></i>
<textarea ng-model="reservation.remark" placeholder="Any additional remarks..." rows="5"></textarea>
</label>
<!--<a ui-sref="tab-main" class="button button-positive button-block" ng-controller="submitCtrl" ng-click="submit()">Submit</a>-->
<a class="button button-positive button-block" ng-click="submit()">Submit</a>
</form>
</div>
</div>
</ion-view>
I managed to insert new data into the firebase through my PC web browser however, once I run it on my android devices i could not retrieve my local storage data and could not insert any data into the firebase at all. Thanks You

ionic state did not run correctly

Is there anything wrong with the following ionic code,caz the url './#/tab/guiderRegister' seems not working properly, which only shows the header. but './#/tab/register'and './#/tab/signup' can work.
//ionic state
.state('tabs.register', {
url:'/register',
views:{
'home-tab':{
templateUrl:'./register',
controller:'homeController'
}
}
})
.state('tabs.guiderRegister', {
url:'/guiderRegister',
views:{
'home-tab':{
templateUrl:'./guiderRegister',
controller:'homeController'
}
}
})
.state('tabs.signup', {
url:'/signup',
views:{
'home-tab':{
templateUrl:'./signup',
controller:'homeController'
}
}
})
//html
<div class="row registerChoose">
<div>
<div class="chooseEG">Expat</div>
<div class="chooseEG">Guider</div>
<div class="chooseEG">signup</div>
</div>
</div>
//guiderRegister
<ion-view view-title="Guider Register" hide-tabs>
<ion-nav-buttons side="secondary">
<button class="button button-icon">Signup</button>
</ion-nav-buttons>
<ion-content class="">
<div class="list">
<form name="guiderRegister" action="./postGuiderRegister" method="post" id="guiderRegister">
<label class="item item-input">
<input type="text" placeholder="Username" name="username">
</label>
<label class="item item-input">
<input type="email" placeholder="Email" name="email">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" name="password">
</label>
<label class="item item-input">
<input type="password" placeholder="Password Again" name="password_confirmation">
</label>
<label class="item item-input">
<input type="text" placeholder="Nationality" name="nationality" >
</label>
<label class="item item-input">
<textarea placeholder="* Intruduce Yourself" name="constantIntro" style="min-height:6em;">
</textarea>
</label>
<!-- <label class="item item-input">
<input type="text" placeholder="Service Location" name="location">
</label> -->
<ion-toggle ng-model="serviceLocation">Service Location</ion-toggle>
<ion-radio ng-model="myLocation" ng-show="serviceLocation" ng-repeat="destination in destinationSettings" ng-value="destination.text" name="location">
#{{ destination.text }}
</ion-radio>
<label class="item item-input">
<input type="text" placeholder="Charge" name="change">
</label>
<ion-toggle ng-model="serviceProvided">Service Provided</ion-toggle>
<ion-checkbox ng-repeat="item in provideList"
ng-model="item.checked"
ng-checked="item.checked"
ng-show="serviceProvided">
#{{ item.text }}
</ion-checkbox>
<input name="_token" type="hidden" value="{{ csrf_token() }}">
</form>
</div>
</ion-content>
<ion-footer-bar align-title="middle" class="bar-stable">
<input type="submit" class="title button" value="submit" form="guiderRegister">
</ion-footer-bar>
</ion-view>

ng-click inside label does not work

<ion-view>
<div class="bar bar-header bar-dark">
<h1 class="title">Welcome</h1>
</div>
<ion-content class="has-header">
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</label>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
why the button(获取验证码) inside label tag doesnt work?
but the button(登 陆) outside label tag work fine, why?
please help me to fixed this. I need to make a response when click
the button(获取验证码)
working demo
The solution is simply not to use a label for the item. Instead just use a div
html
<form ng-submit="doLogin()">
<div class="list">
<div class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<!-- <input ></input> -->
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</div>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>

Ionic grid alignment row and column with column offset

I have the following content in ionic.
<ion-content>
<div class="row row-center">
<div class="col-150 col-offset-50"><h4>Login</h4></div> </div>
<div class="row">
<div class=" col-10 col-offset-50"><h4>Username</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="text" placeholder="Username" ng-model="username">
</label></div>
</div>
<div class="row row-bottom">
<div class=" col-10 col-offset-50"><h4>Password</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="password" placeholder="Password" ng-model="password">
</label>
</div>
</div>
</ion-content>
The output looks like this:
I am new to ionic and would really appreciate some help in
1)space between the two rows for username and password
2)Aligning both the username and password rows a little more to the left so that the Login row looks centered.
Why don't you use inline labels?
To align all labels to center, add text-center class to your labels.
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label text-center">Login</span>
</label>
<label class="item item-input">
<span class="input-label text-center">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label text-center">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To centrally align just 'Login' label, add text-center just to that label
<ion-content>
<div class="list">
<label class="item text-center">
Login
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To add space between items, add margin-bottom to .input-label class. Don't do this in the original ionic css file - create another stylesheet to contain all your overrides.

sinatra body yielded non string value

I'm trying to insert a new branch for distributor data to pass to Sinatra. It's able to insert a new record but this error is produced:
"ERROR Rack::Lint::LintError: body yielded non string value [:disBranchID, 27]"
disBranchID is the primary key of the table and it's set to auto increment.
The HTML looks like this:
<form name="add_dis_branch_form" action="/add_dis_branch" method="post" id="disB" enctype="multipart/form-data">
<div class="input-group">
<span class="input-group-addon"> Brand </span>
<select id="disSlcMan" class="btn btn-default full-width" name="disID" ng-model="disB.disID" required>
<option value="">Select Brand</option>
<% AutoMobile::DB[:distributor].select(:disID, :disComName).each do |dis| %>
<option value="<%= dis[:disID]%>"><%= dis[:disComName] %></option>
<% end %>
</select>
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker"></i> Address</span>
<input type="text" class="form-control" name="address" placeholder="Address" required ng-model="disB.address" >
</div>
<br>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="input-group">
<span class="input-group-addon"> City </span>
<input type="text" class="form-control" name="city" placeholder="Petaling Jaya" required ng-model="disB.city">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="input-group">
<span class="input-group-addon"> State </span>
<input type="text" class="form-control" name="state" placeholder="Selangor" required ng-model="disB.state">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="input-group">
<span class="input-group-addon"> Zip </span>
<input type="text" class="form-control" name="zip" placeholder="47800" required ng-model="disB.zip" ng-pattern="/^\d{5}$/">
</div>
<span ng-show="add_dis_branch_form.zip.$error.pattern" class="help-inline">Invalid zip code</span>
</div>
<div class="col-lg-6 col-md-6">
<div class="input-group">
<span class="input-group-addon" title="Map"><i class="fa fa-map-marker"></i></span>
<button id="btMap" class="btn btn-success form-control" onclick="return false;">Find Your Location</button>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="input-group">
<span class="input-group-addon"> Latitude </span>
<input type="text" class="form-control" id="disLat" name="latitude" required ng-model="disB.latitude" >
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="input-group">
<span class="input-group-addon"> Longitude </span>
<input type="text" class="form-control" id="disLong" name="longitude" required ng-model="disB.longitude" >
</div>
</div>
</div>
<small>
<b class="help-inline">
Click Find Your Location button to locate your address.
</b>
</small>
<br>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></i> Phone</span>
<input type="text" class="form-control" name="phoneNo" placeholder="03-12345432" required ng-model="disB.phoneNo" ng-pattern="/^0[0-9]{1}-[0-9]{8}$/">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-print"></i> Fax </span>
<input type="text" class="form-control" name="faxNo" placeholder="03-12345432" required ng-model="disB.faxNo" ng-pattern="/^0[0-9]{1}-[0-9]{8}$/">
</div>
</div>
</div>
<br>
<div class="pull-right">
<input type="submit" class="btn btn-success" ng-disabled="!canSave('add_dis_branch_form')">
</div>
</form> <!-- end form -->
The Sinatra code:
add_dis_branch = lambda do
newBranch = AutoMobile::DisBranch.new
newBranch.address = params[:address]
newBranch.city = params[:city]
newBranch.state = params[:state]
newBranch.zip = params[:zip]
newBranch.phone = params[:phoneNo]
newBranch.fax = params[:faxNo]
newBranch.latitude = params[:latitude]
newBranch.longitude = params[:longitude]
newBranch.disID = params[:disID]
newBranch.save
end
Here is one way you could write the route:
post "/automobile/branch" do
newBranch = AutoMobile::DisBranch.new
newBranch.address = params[:address]
newBranch.city = params[:city]
newBranch.state = params[:state]
newBranch.zip = params[:zip]
newBranch.phone = params[:phoneNo]
newBranch.fax = params[:faxNo]
newBranch.latitude = params[:latitude]
newBranch.longitude = params[:longitude]
newBranch.disID = params[:disID]
newBranch.save
halt 201
end
but I suggest you take a good read of the documentation for Sinatra on creating routes and for Sequel on creating model instances.