My goal is to apply text formatting to a string named 'name'. Once the string is entered into an HTML form and the save button is clicked, the new formatted string should be displayed below the form. The formatting rule states that if the length of the string is even, it should be converted to uppercase, and if it's odd, it should be converted to lowercase.
I have implemented the logic for changing the text case inside the 'formatFactory' factory. The 'format' method within the 'formatFactory' is responsible for this task.
Here is the code from 'formattingFactory.js':
app.factory('formatFactory', function(){
var formattingFactoryObject = {};
formattingFactoryObject.format = function(name) {
if(name.length % 2 == 0) {
name.toUpperCase();
} else {
name.toLowerCase();
}
}
});
In addition, I have a service called 'sessionService' which handles saving session data such as the 'name' and 'nickname' strings. Here is a snippet from 'sessionService.js':
angular.module('app').service('sessionService',[
'$window',
sessionService
]);
function sessionService($window) {
this.save = save;
this.get = get;
this.clear = clear;
function save(key, value) {
$window.sessionStorage.setItem(key, value);
}
function get(key, value) {
return $window.sessionStorage.getItem(key);
}
Finally, in my controller ('sessionController.js'), I call the method for changing the string case just before saving the session data using 'vm.setServiceSession' method:
angular.module('app').controller('sessionController',[
'sessionService','formatFactory',
function sessionController(sessionService) {
var vm = this;
vm.getServiceSession = function() {
// Retrieve session data here
}
vm.setServiceSession = function() {
formattingFactoryObject.format(name);
sessionService.save('name', vm.model.name);
sessionService.save('nickname', vm.model.nickname);
vm.getServiceSession();
}
});
'index.html' contains the layout for the form where users can input data:
<!DOCTYPE html>
<html ng-app="app">
<!-- Include necessary stylesheets and scripts -->
<body ng-controller="sessionController as vm">
<div class="container">
<h1>Services and Factories</h1>
<!-- Form elements for name and nickname data -->
<input type="button" ng-click="vm.setServiceSession()" class="btn btn-primary" value="Save"/>
<input type="button" ng-click="vm.getServiceSession()" class="btn btn-default" value="Retrieve from Service"/>
<pre>{{vm.model | json }}</pre>
</div>
Despite implementing the code, the issue persists with the text case not being changed as expected.