Currently, I am developing a web app using AngularJS 1.6.6. In my template, I have implemented ng-show in order to recycle it:
<div >
<br/>
<div class="form">
<form data-ng-submit="objectHandlerVM.functions.objectHandlerSwitcher()">
<button data-ng-show="objectHandlerVM.functions.where('/editObject/'+objectHandlerVM.object.idn)">Edit</button>
<button data-ng-show="objectHandlerVM.functions.where('/createObject')">Create</button>
<button data-ng-show="objectHandlerVM.functions.where('/deleteObject/'+objectHandlerVM.object.idn)">Delete</button>
</form>
</div>
</div>
This setup is designed to display a different button based on the URL accessed. Below is the code snippet of the controller:
angular.module('objectApp')
.controller('objectHandlerCtrl', ['objectFactory','usersFactory','$routeParams','$location',
function(objectFactory,usersFactory,$routeParams,$location){
var objectHandlerViewModel = this;
objectHandlerViewModel.object={};
objectHandlerViewModel.functions = {
where : function(route){
return $location.path() == route;
},
readUserNameEmail : function() {
usersFactory.getUser()
.then(function(response){
objectHandlerViewModel.object.title= response.title;
objectHandlerViewModel.object.content= response.content;
console.log("Reading user with id: ",response.idn," Response: ", response);
}, function(response){
console.log("Error reading user data");
})
},
updateObject : function() {
objectFactory.putObject(objectHandlerViewModel.object)
.then(function(response){
console.log("Updating object with id:",objectHandlerViewModel.object.idn," Response:", response);
}, function(response){
console.log("Error updating object");
})
},
createObject : function() {
objectFactory.postObject(objectHandlerViewModel.object)
.then(function(response){
console.log("Creating object. Response:", response);
}, function(response){
console.log("Error creating the object");
})
},
deleteObject : function(id) {
objectFactory.deleteObject(id)
.then(function(response){
console.log("Deleting object with id:",id," Response:", response);
}, function(response){
console.log("Error deleting object");
})
},
objectHandlerSwitcher : function(){
if (objectHandlerViewModel.functions.where('/createObject')){
console.log($location.path());
objectHandlerViewModel.functions.createObject();
}
else if (objectHandlerViewModel.functions.where('/editObject/'+objectHandlerViewModel.object.idn)){
console.log($location.path());
objectHandlerViewModel.functions.updateObject();
}
else if (objectHandlerViewModel.functions.where('/deleteObject/'+objectHandlerViewModel.object.idn)){
console.log($location.path());
objectHandlerViewModel.functions.deleteObject(objectHandlerViewModel.object.idn);
}
else {
console.log($location.path());
}
$location.path('/');
}
}
console.log("Entering objectHandlerCtrl with $routeParams.ID=",$routeParams.ID);
if ($routeParams.ID==undefined) objectHandlerViewModel.functions.readUserNameEmail();
else objectHandlerViewModel.functions.readObject($routeParams.ID);
}]);
When trying to create an object and accessing the template, the URL should end with "createObject" for only one button to be displayed. The same rule applies to "editObject" and "deleteObject". However, all three buttons are being shown instead of just one.
I also attempted the following approach:
<button data-ng-show="objectHandlerVM.object.idn!=undefined">Edit</button>
<button data-ng-show="objectHandlerVM.object.idn==undefined">Create</button>
Even with this method, both buttons are still being displayed, causing further confusion...