Tips on deleting the last character in an input field with AngularJS

Can you help me with the title of this question? I'm currently working on developing a straightforward calculator using AngularJS. It's operational at the moment, but I'm looking to incorporate additional buttons like a "delete" key and a decimal point key. The focus is currently on implementing the delete key.

For example, if a user inputs 3 and then mistakenly adds another 3, the calculator displays 33. This calculator only accepts a single left operand, a right operand, and an operator to separate them (e.g., 3+3 or 56*486). It does not accommodate multiple operators or operands. Now, consider a scenario where the user types in 334 but wants to remove the 4 because they intended to press 5. How can I utilize JavaScript to delete the most recent number if an operator or equals sign hasn't been pressed yet?

$scope.deleteNumb = function(d){
        if(!$scope.operator){
            // Delete the most recent left operand
        }
        else{
            // Delete the most recent right operand
        }
    };

The "C" button is currently non-functional. Initially, it was supposed to clear the calculator by refreshing the page to begin a new calculation. I need to find a way to erase the existing answer without resorting to using location.reload();

The primary objective here is to delete the most recent operand, whether it's the left or right one, depending on whether an operator has been selected or not.

You can find my code here: https://codepen.io/tevon/pen/Moewba

javascriptangularjs

Answer №1

Have you attempted to clear all the values in the setClear function for the clear (C) option?

 $scope.setClear = function (a) {
          $scope.leftOperand = "";
        $scope.operator = "";
        $scope.rightOperand = "";
        $scope.answer = "";
        };

Answer №2

If you want to remove a specific section of a string, consider using the substr method like so:

Here is an example:

 $scope.removeBtn = function(){

         var temp = $scope.inputString;

         console.log("testing",temp)
         $scope.inputString = temp.substr(0,temp.length-1);

       }

This code snippet will remove the last character from the inputString variable. You can customize it according to your requirements for other parts of the string.

Answer №3

    $scope.clearValues = function (input) {
       // $scope.clear = location.reload();
      var equation = $scope.firstValue + $scope.operator + $scope.secondValue;
      equation = equation.substring(0, equation.length - 1);

       if ($scope.operator){
            $scope.secondValue = equation;
        }
        else {
            $scope.firstValue = equation;
        }



    };

Not yet tested.. May need adjustments when different operators are used

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating URLs with Ajax Requests in CakePHP

How can ajax calls in javascript files located in the webroot be handled without PHP interpretation? In my project using CakePHP and require.js, I avoid placing javascript directly in views. To address this issue, I set a variable in the layout to store t ...

javascriptphpjqueryajaxcakephp

Issue encountered with @Nuxt.js/Cloudinary plugin for Media Enhancement: "Access to this endpoint is restricted due to insufficient permissions"

I am currently utilizing the @nuxtjs/cloudinary module based on the module guide and a course video. However, I am encountering an error in the response as follows: Status 403, message: You don't have sufficient permissions to access this endpoint&qu ...

javascriptvue.jsnuxt.jscloudinary

securely managing file access through lockfile.locksync in node.js

Currently, I am utilizing lockfile.locksync to secure a file in my node.js application. However, I am interested in understanding the inner workings of this utility in more detail. Despite multiple resources referring to it as a "very polite lock file util ...

javascriptnode.jsnpmlocking

Can Jquery be utilized to signal a language change?

I'm working on my portfolio website that will be available in two languages, Thai and English. I have successfully implemented language buttons for changing between the two languages. However, I am facing an issue with the language selection when nav ...

javascriptphpjqueryhtml

What steps are involved in making select fields that change dynamically?

There are two fields available for the user to interact with: size and design. Users have the ability to add more instances of these fields as many times as they desire. Illustration: If I choose M for the size, it will display in the console: https://i ...

javascriptreactjsmaterial-ui

Clickable link that directs to a particular tab on a webpage (cbpFWTabs)

I have been utilizing tabs from the codrops Tab Styles Inspiration and I am looking for a way to open specific tabs using URLs. For instance, if I wanted to open tab3, I could link it as www.google.com/index#tab3. Below is the code I am currently using: ...

javascriptjqueryhtml

Troubleshooting material design CSS problem in AngularJS routing module

Attempting to incorporate material design with routing in angular js, but encountering issues with CSS design not working. Interestingly, when using bootstrap CSS, it functions properly. Check out the Plnker Demo here However, upon trying this approach, ...

cssangularjsangularjs-routingangular-material

`How can I customize the appearance of individual selected <v-list-item> across various sub-groups?`

As a newcomer to Vuetify and Vue in general, I am struggling to solve a specific issue. I need to create multiple sub-groups where only one option can be selected within each "parent" list. Consider an array of cats: options:["Crookshanks", "Garfield", " ...

javascriptvue.jsvuetify.js

Chrome debug function named "Backbone" triggered

Backbone provides the capability to activate functions in other classes by utilizing Backbone.Events effectively. a.js MyApp.vent.on("some:trigger", function(){ // ... }); b.js function test(){ doSomething(); MyApp.vent.trigger("some:trig ...

javascriptdebuggingbackbone.jsgoogle-chrome-devtools

Incorporate a widget with dynamic height adjustment

We are currently working on creating a widget that can be easily embedded by third-party websites. Our goal is to have the widget automatically adjust its height through the embed script. Initially, we considered using an IFrame generated by our JavaScrip ...

javascriptjqueryhtmlembed

Leverage JSON data and implement it in JavaScript

In my PHP page, I have a JavaScript function that includes a JSON method for retrieving data from the database. The code snippet looks like this: $this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class ...

javascriptphpjsonyii2

Activate the parent navigation link when on sub-pages

I want to ensure that the parent navigation item is highlighted when a user is on a child page based on the URL. For example, if the user is currently viewing foo1-child and the parent is foo1, I need to apply the active class to Foo 1: http://foo.com/foo ...

javascriptjqueryhtmlcss

Utilizing TypeScript Class Inheritance: The Reference to 'super' is Only Allowed in Members of Derived Classes or Object Literal Expressions

We have encountered a scoping issue while using TypeScript classes with inheritance. It seems that TypeScript/JavaScript does not allow us to use 'super' within a promise structure or an enclosed function. The error message we are getting is: Ty ...

javascriptjqueryinheritancetypescript

Response Looping Function

I am struggling with looping and storing data in an array. /** Model for displaying response*/ export class ResultsData { id: number, name: string, startDate: string, endDarte: string, startTime: string, ...

javascriptarraysangulartypescriptlodash

Protractor experiencing sluggish performance on Internet Explorer11

When using Protractor to run my test cases in Internet Explorer 11, I noticed that it takes significantly longer compared to Firefox and Chrome. It even takes around 20 seconds just to enter the text "Hello" into a text box. Is there a way to improve the ...

angularjsnode.jsinternet-explorerselenium-webdriverprotractor

Expanding the properties of an object dynamically and 'directly' by utilizing `this` in JavaScript/TypeScript

Is it possible to directly add properties from an object "directly" to this of a class in JavaScript/TypeScript, bypassing the need to loop through the object properties and create them manually? I have attempted something like this but it doesn't se ...

javascripttypescript

Adding a third-party script after closing the body tag on specific pages in NextJS can be achieved by using dynamic imports and

In my NextJS application, a third-party script is currently being loaded on all pages when it's only needed on specific pages. This has led to some issues that need to be addressed. The script is added after the closing body tag using a custom _docum ...

javascriptreactjsnext.js

What is the best way to save and reload a canvas for future use?

My current setup involves using PDF.js to display PDF documents in a web browser. The PDF.js library utilizes canvas for rendering the PDF. I have implemented JavaScript scripts that allow users to draw lines on the canvas by double-clicking, with the opti ...

javascripthtmlhtml5-canvas

Capture the response from an AJAX request and store it in a JavaScript variable

I've been struggling to find a solution for this issue for quite some time now without any success. Here's what I'm trying to accomplish: I need to retrieve an array from my PHP file so that I can utilize it in my JavaScript code. Example. ...

javascriptphpjqueryajax

Organizing entries based on the quantity of attached documents

I am currently working with mongodb and mongoose. I have a situation where users can create ratings and reviews for products. I want to retrieve the review of the product that has received the highest number of votes. Is this achievable in mongo? The data ...

javascriptnode.jsmongodbsortingmongoose