TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Deirdre Weldon
NA
7
639
Help with creating two fields on Ionic-1 app
Aug 1 2017 6:37 PM
Help with creating two fields on Ionic-1 app
Hello, I wonder if anyone could help. I am trying to create 2 fields (creationTime & creationDate) in ionic1 app, which is online reminder, using jsonblob API. Both fields should show on jsonblob but not be visible on the app. I can't seem to work out how to do this.
MAIN.JS
<ion-view ng-controller="mainCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">{{reminder.titleText}}</h1>
</ion-header-bar>
<ion-content class="has-header">
<ion-item class="item-head">
<h2>Title</h2>
</ion-item>
<ion-item class="item-body">
<input type="text" ng-model='reminder.titleText' id="input-box">
</ion-item>
<ion-item class="item-head">
<h2>Description</h2>
</ion-item>
<ion-item class="item-body">
<textarea rows="5" ng-model='reminder.descText' ng-value="" id="desc-box"></textarea>
</ion-item>
<ion-item class="item-head">
<h2>Priority</h2>
</ion-item>
<span radio-group class="item-body">
<ion-radio ng-model='reminder.priority' ng-value='1'>High</ion-radio>
<ion-radio ng-model='reminder.priority' ng-value='2'>Medium</ion-radio>
<ion-radio ng-model='reminder.priority' ng-value='3'>Low</ion-radio>
</span>
<ion-item class="item-head">
<h2>Complete</h2>
</ion-item>
<ion-toggle class="item-body" ng-model="reminder.complete">Complete</ion-toggle>
<!-- Show save button if there is no saved myjsonblobID, otherwise show update and delete buttons -->
<ion-item ng-if="haveID==false">
<button class="button button-positive large round" ng-click="createmyjsonblob'()">Save</button>
</ion-item>
<ion-item ng-if="haveID==true">
<button class="button button-positive large round" ng-click="updatemyjsonblob()">Update</button>
<button class="button button-positive large round" ng-click="deletemyjsonblob()">Delete</button>
</ion-item>
</ion-content>
</ion-pane>
</ion-view>
CONTROLLER.JS
var app = angular.module('myNews');
app.controller("mainCtrl",function($scope, myjsonblobService, storageService){
//On startup check if there is a myjsonblobID saved in the local storage
$scope.$on("$ionicView.beforeEnter",function(){
var ID = storageService.getIDFromStorage();
//if no id, set reminder data to default
if(ID == "undefined" || ID === null || ID === ""){
$scope.reminder = {
titleText : "",
descText : "",
priority : 1,
complete : false,
}
//show save button
$scope.haveID = false;
}
//if there is an id, set id from storage to myjsonblobService, then get data from myjsonblob
else{
//show update and delete buttons
$scope.haveID = true;
//let the myjsonblob ID service know the current myjsonblob ID
myjsonblobService.setmyjsonblobID(ID);
//get myjsonblob data
myjsonblobService.getmyjsonblob(getCallbackOK,getCallbackNOTOK);
}
});
/*----------------- Link Service Functions -------------------------------------*/
$scope.createmyjsonblob = function(){
myjsonblobService.createmyjsonblob(createCallbackOK,createCallbackNOTOK,$scope.reminder);
}
$scope.updatemyjsonblob = function(){
myjsonblobService.updatemyjsonblob(updateCallbackOK,updateCallbackNOTOK,$scope.reminder);
}
$scope.deletemyjsonblob = function(){
myjsonblobService.deletemyjsonblob(deleteCallbackOK,deleteCallbackNOTOK,$scope.reminder);
}
/*----------------- Callback Functions -------------------------------------*/
//Callback functions for the create new myjsonblob request
function createCallbackOK(){
//update shown buttons
$scope.haveID = true;
//get new myjsonblobID
ID = myjsonblobService.getmyjsonblobID();
//save new myjsonblobID to local storage
storageService.setIDInStorage(ID);
}
function createCallbackNOTOK(){
alert("Sorry, there was an error accessing the server to create the reminder, please try again later.");
}
//Callback functions for the get myjsonblobID request
function getCallbackOK(data){
//update scope data with saved reminder data
$scope.reminder = data;
}
function getCallbackNOTOK(){
alert("Sorry, there was an error accessing the server to get the reminder data, please try again later.");
}
//Callback function for the update myjsonblobID request
function updateCallbackOK(data){
$scope.reminder = data;
//update scope data with new reminder
}
function updateCallbackNOTOK(){
alert("Sorry, there was an error accessing the server to update the reminder data, please try again later.");
}
//Callback function for the delete myjsonblobID request
function deleteCallbackOK(data){
$scope.reminder = data;
//update scope data with new reminder
}
function deleteCallbackNOTOK(){
alert("Sorry, there was an error accessing the server to delete the reminder data, please try again later.");
}
});
SERVICES.JS
var app = angular.module('myNews')
/*
MYJSONBLOBSERVICE
contains all functionality needed to send, recieve and update data from the myjsonblob website
*/
.service('myjsonblobService', function($http){
//url for myjsonblob
var myjsonblobURL = "https://jsonblob.com/api/jsonBlob";
//holds myjsonblobID during runtime
var myjsonblobID ="";
/*------------------ Create --------------------------------------------*/
//function call to create myJSON
this.createmyjsonblob =(createCallbackOK, createCallbackNOTOK,data){
//request to create myjsonblobID using reminder data
$http.post(myjsonblobURL,JSON.stringify(data)).then(postOK,postNOTOK);
//create ok, gets the myjsonblobID and calls back to controller
function postOK(response){
myjsonblobID = response.headers ("x-jsonblob");
console.log("myjsonblobID = " + myjsonblobID);
createCallbackOK();
}
//create not ok, calls back to the controller
function postNOTOK(response){
createCallbackNOTOK();
}
}
/*------------------ Get -----------------------------------------------*/
//function call to get data stored on myjsonblob
this.getmyjsonblob = function(getCallbackOK,getCallbackNOTOK){
$http.get(myjsonblobURL+"/"+myjsonblobID).then(getOK,getNOTOK);
//get ok gets the data associated with myjsonblobID, to be returned to the data attribute of response object
function getOK(response){
console.log("myjsonblobID = " + myjsonblobID);
getCallbackOK(response.data);
}
//get not ok, calls back to the controller
function getNOTOK(response){
getCallbackNOTOK();
}
}
/*------------------ Update --------------------------------------------*/
//function call to update myjsonblob data
this.updatemyjsonblob = function(updateCallbackOK, updateCallbackNOTOK, data){
//request to update myjsonblob using reminder data
$http.put(myjsonblobURL+"/"+myjsonblobID,JSON.stringify(data)).then(putOK,putNOTOK);
//update ok
function putOK(response){
updateCallbackOK (response.data);
//nothing needed to be done
}
//update not ok, calls back to the controller
function putNOTOK(response){
updateCallbackNOTOK();
}
}
/*------------------ Delete --------------------------------------------*/
//function call to delete myjsonblob data
this.deletemyjsonblob = function(deleteCallbackOK, deleteCallbackNOTOK){
//request to delete myjsonblob using reminder data
$http.delete(myjsonblobURL+"/"+myjsonblobID).then(deleteOK,deleteNOTOK);
//delete ok
function deleteOK(response){
var blobID = response.headers("x-jsonblob");
deleteCallbackOK ();
//nothing needed to be done
}
//delete not ok, calls back to the controller
function deleteNOTOK(response){
deleteCallbackNOTOK();
}
}
/*------------------ Get BlobID -----------------------------------------*/
this.getmyjsonblobID = function(){
return myjsonblobID;
}
this.setmyjsonblobID = function(ID){
myjsonblobID = ID;
}
})
/*
STORAGESERVICE
contains all functionality needed to save, recieve and delete the myjsonblobID from the local storage
*/
.service('storageService', function($window){
//Saves/updates the myjsonblobID in local storage
this.setIDInStorage = function(myjsonblobID){
$window.localStorage.setItem("myjsonblobID",myjsonblobID);
}
//Retrieves the myjsonblobID from local storage
this.getIDFromStorage = function(){
return $window.localStorage.getItem("myjsonblobID");
}
//Deletes the myjsonblobID from local storage
this.removeIDFromStorage = function(){
$window.localStorage.removeItem("myjsonblobID");
}
});
Reply
Answers (
1
)
how to append html to div in angularjs
How to showa bootstrap alert inside anguularjs post method