Posting to a Google Spreadsheet with AngularJs - angularjs

Following on from this post Load JSON in AngularJS App (loading google spreadsheet) how do i go about posting data from my Angular app to a spreadsheet? Is it even possible to do?
I've created a version of my app that updates an array of data locally but now want to switch to pulling in data from an external source (a google spreadsheet - this works at the moment) and posting to this external source as well.
PS only using Google Spreadsheet for quick prototyping.
HTML form, the ng-submit was then being used to update a local array within my controller.
<form name="reviewsForm" class="form-horizontal" ng-controller="newReviewController as newReviewCtrl" ng-submit="reviewsForm.$valid && newReviewCtrl.addScore(reviews)" novalidate>
<div class="form-group">
<label for="type" class="col-xs-4 control-label hide">Review type</label>
<div class="col-xs-6 select-menu">
<select tabindex="" name="type" id="type" class="validate" ng-model="newReviewCtrl.reviews.type" class="validate" required>
<option value="" disabled selected>Review type</option>
<option ng-repeat="type in types">{{type.name}}</option>
</select>
</div>
<label for="reviewTitle" class="col-xs-4 control-label hide">Review title</label>
<div class="col-xs-6">
<input tabindex="" type="text" name="reviewTitle" ng-model="newReviewCtrl.reviews.name" class="validate" placeholder="Review title" required>
</div>
</div>
<div class="form-group">
<label for="Description" class="col-xs-4 control-label hide">Description</label>
<div class="col-xs-12">
<input tabindex="" type="text" name="Description" ng-model="newReviewCtrl.reviews.desc" class="validate" placeholder="Description" required >
</div>
</div>
<div class="form-group">
<label for="Image" class="col-xs-4 control-label hide">Image url</label>
<div class="col-xs-6">
<input tabindex="" type="text" name="Image" ng-model="newReviewCtrl.reviews.imgUrl" class="validate" placeholder="Image url" required >
</div>
<label for="info" class="col-xs-4 control-label hide">More info url</label>
<div class="col-xs-6">
<input tabindex="" type="text" name="info" ng-model="newReviewCtrl.reviews.infoUrl" class="validate" placeholder="More info url" required >
</div>
</div>
<div class="form-group">
<label for="date" class="col-xs-4 control-label hide">Date</label>
<div class="col-xs-6">
<input tabindex="" type="date" max="2020-01-01" min="2015-01-01" name="date" ng-model="newReviewCtrl.reviews.date" class="validate" placeholder="YYYY-MM-DD" required>
</div>
<div class="col-xs-6 text-right">
<button tabindex="" type="submit" class="btn btn-block waves-effect waves-light green btn-add white-text" ng-show="reviewsForm.$valid" ng-click="newReviewCtrl.reviews.type='0'" id="add-submit" style="margin:0px;" data-toggle="collapse" data-target="#addReviewCollapse" aria-expanded="false" aria-controls="addReviewCollapse">
Add
</button>
</div>
</div>
Example of part of the existing array of data
$scope.reviews = [
{
name: "The Force Awakens",
imgUrl: 'img/theforceawakens.jpg',
type:'Movie',
desc: 'Amazeballs',
infoUrl: '???',
date: new Date(2016, 02, 16, 16)
},
I've put all the same information in to a google spreadsheet and am using this post to pull that data in to my page Load JSON in AngularJS App (loading google spreadsheet) , i now want to post to that spreadhseet as well using the above form but dont know where to start.

Related

all the data is gone in the form when i put ng-model angularjs

I want to load data of a selected row in a form in order to update it. I successfully had the data loaded in the form, the but the problem is when I use ng model to save the data all the stuff have been put in the form fields disappear.
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="cout_total" class="form-control" disabled ng-model="cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="submit" class="btn btn-primary" ng-click="upadateProjet()">Valider</button>
</div>
</div>
</form>
this is the angularjs method:
$scope.updateProjet= function(){
$scope.projet={'ref_projet':$scope.refprojet,'intitule_fr':$scope.intitule_fr,'description':$scope.description,cout_total':$scope.cout_total};
$http.put("/editprojet", $scope.projet)
.success(function(data,status,headers,config){
});
}
rest controller
#RequestMapping(value="/editprojet",method=RequestMethod.PUT)
public Projet editProjet(#RequestBody Projet p) {
return projetMetier.editProjet(p);
}
you are using button type="submit"
it will clear the form use button tag
<button></button>
$scope.updateProjet= function(projData){
$http.put("/editprojet", projData)
.success(function(data,status,headers,config){
}).error(function(data){
console.log(data)
});
}
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="proj.ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="proj.intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="proj.cout_total" class="form-control" disabled ng-model="proj.cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="proj.description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="button" class="btn btn-primary" ng-click="upadateProjet(proj)">Valider</button>
</div>
</div>
</form>
</div>
have you tried removing the value attribute? this happened to me when I once added DOM forms on the fly, I managed by using jquery to force capture by:
$(this).find('.inputClass').val();
this sort of jequery is already embeded inside Angular so no need to add the the library.

How to switch form base of flag in HTML (Angular JS)

I want to use same form for two different Views and I have two different roles.
1. Client
2. Manager
In my Controller I have added a flag based on the user role that is logged in.
$scope.userFlag=$rootScope.globalSession.UserRole,
If I login as a Manager then the value of $rootScope.globalSession.UserRole="Manager"
& If I login as a Client then the value of $rootScope.globalSession.UserRole="Client"
Now in my form I have added a condition to switch it -> ng-if="userFlag==Admin"
<form class="form-horizontal" name="UpdateAdminProfileForm" id="UpdateAdminProfileForm">
<h2>Update Profile</h2>
<hr>
<fieldset name="client" id="client" ng-if="userFlag==Admin">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Domain Name*</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Enter your username" class="form-control input-md" ng-model="theClient.OrganizationDomain" disabled>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="update"></label>
<div class="col-md-4">
<a><button id="update" name="update" class="btn btn-primary" ng-click="updateClient()">Update</button></a>
</div>
</div>
</fieldset>
<fieldset name="manager" id="manager" ng-show="userFlag==Manager">
<div class="form-group" ng-class="{ 'has-error': submitted && UpdateAdminProfileForm.myemail.$error.required || UpdateAdminProfileForm.myemail.$error.pattern }">
<label class="col-md-4 control-label" for="myemail">Email*</label>
<div class="col-md-4">
<input id="myemail" name="myemail" type="email" placeholder="Enter your email" class="form-control input-md" ng-model="theClient.Email" ng-pattern="regex.Email" ng-maxlength="20" required autofocus >
<span ng-show="submitted && UpdateAdminProfileForm.myemail.$error.required" class="help-block">Email can not be empty</span>
<span ng-show="UpdateAdminProfileForm.myemail.$error.pattern && UpdateAdminProfileForm.myemail.$invalid " class="help-block">Please enter a valid email</span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="button" ng-click="updateManager()">Save</button>
</div>
</fieldset>
</form>
</div>
</div>
But its not working when I open the form, its empty and If I remove ng-if="userFlag==Admin" & ng-if="userFlag==Manager" from tags then it display the fields for both field set.
Image With FLAG
Image After Removing FLAG
Help! Thanks in advance.
It should be
ng-if="userFlag=='Admin'"
Try This
ng-if="userFlag=='Admin'" or ng-show="userFlag=='Manager'"

Need help: getting a Bootstrap email contact form to work from HTML/PHP code

I am setting up a blog and have a contact form page (standard bootstrap blog template)
I have everything uploaded onto my host - hostgator, but I can't manage to get the contact form to send an email out properly.
I have tried both an external email account and an account on the same domain name with no luck.
Here is the original html source for the contact page from bootstrap: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/contact.html
and the original source for the contact_me.php: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/mail/contact_me.php
Is there a setting I need to change from the hostgator cpanel or something in the code I'm missing?
Edit: Here is my domain if you want to view the source I have in place:
www.decentralizeblog.com
I have made bit changes to the form
you have not used certain attributes in your form
link method, action and name attribute in text field
<form name="sentMessage" id="contactForm" action="mailer.php" method="post" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" name="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" name="phone" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" name="message" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
This may not be a problem with your code, have you checked that your hostgator plan supports the php mail() function? Some plans (I know from experience) have this disabled as an incentive for you to upgrade.
Hope this helps.

Using angular submit button causes redirect instead of calling function in SharePoint

I have a form within my angular app (within SharePoint) that uses routing via hashbang, but when I click on a button in my form, it redirects to the root (like it can't resolve the URL so it uses the otherwise setting in my config), instead of executing the function.
Here is the HTML (my controller is defined in the routing):
<form name="newItem" class="form-horizontal" data-ng-submit="createItem()">
<fieldset>
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
({{70 - newItem.title.$viewValue.length}} Characters Remaining)
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
Your summary will be displayed as follows ({{500 - newItem.body.$viewValue.length}} Characters Remaining):<br /> {{itembody}}
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" data-ng-click="newItem">Submit</button>
</div>
</div>
</fieldset>
</form>
Here is my controller:
appControllers.controller('appItemPostCtrl', ['$scope', '$location', 'appItems', 'appTypes', function ($scope, $location, appItems, appTypes) {
var itemEntry = new appItems;
console.log(itemEntry);
$scope.types = [];
appTypes.query(function (typedata) {
var itemTypes = typedata.value;
// Foreach type, push values into types array
angular.forEach(itemTypes, function (typevalue, typekey) {
$scope.types.push({
label: typevalue.Title,
value: typevalue.Title,
});
})
});
$scope.createItem = function () {
itemEntry.Title = $scope.itemtitle;
itemEntry.$save();
}
$scope.cancel = function () {
}
}]);
UPDATE: It appears that this is related to SharePoint (My Angular Form is in SharePoint), as even setting the button type to submit as follows triggers the refresh instead of running the function. SharePoint is wrapping everything in a form since it inherits from the Master page of the Web, so when I added two "Angular Forms" to the page, the first angular form was closing the tag on the SharePoint form so the second was able to work. Does anyone have a stable workaround (beyond creating a custom masterpage). Image as follows:
I solved it by closing the tag of SharePoint instead of creating a custom masterpage. Ex:
<!-- Close the default form tag put in place by SharePoint instead of creating a custom Masterpage without this element that requires increased permissions and complexity to deploy. Without this tag closed, the form below will not render properly -->
</form>
<div>
<form id="newItemForm" class="form-horizontal" data-ng-submit="createItem()">
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
</div>
</div>
<div class="col-lg-10 col-lg-offset-2">
<!--<button type="button" class="btn btn-default" data-ng-click="cancel()">Cancel</button>-->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Add type='button' to the buttons. I had this same problem before and assumed it was an angular bug of some kind.
Do both buttons exhibit this behavior or just the Submit button?
The submit button calls newItem from ng-click, but the name of the function in the js is actually createItem.

How to show validation error messages on the right side of the input field in a tooltip using angular js?

I have form which contains some fields and have validated these fields by using angular.validator. The error messages are displayed under every fields. But I want to display this error messages using tooltip. For example , if some particular field is not valid , the error message should be shown on the right of the field box. I didn't found a solution from other posts of stackoverflow. How to do this ?
I want to show this field is required in a tooltip. ( by making directive) .
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Contact No</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.contactNo" validator="[required, number]" class="form-control" id="" placeholder="" validation-message="Only numeric values are valid!">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Profile Picture</label>
<div class="col-sm-8 companyLogo"> <img src="assets/img/user.png" alt="..." class="img-rounded col-sm-3 ">
<input type="file" id="exampleInputFile" ng-model="proFormSubmit.profilePic">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Language</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.language" validator="[required]">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 1</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address1" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 2</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address2" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">City</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.city" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">State</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.state" validator="[required]">
<option></option>
<option value="Indonesia">Tamilnadu</option>
<option value="Indonesia">Kerala</option>
<option value="Indonesia">Rajasthan</option>
</select>
</div>
</div>
I use http://angular-ui.github.io/bootstrap which has a $tooltipProvider that allows you to modify behavior of the tooltip. Other than that this seems like a CSS + ng-show candidate

Resources