Calculate the total of the provided HTML element's content with Angular version 1.x.x

Looking to calculate the total of all values in table cells with ng-model. However, it is treating the values as strings instead of numbers.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table border=1 ng-app>
  <tr>
    <th>Products</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td ng-model="one">120</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td ng-model="two">120</td>
  </tr>
  <tr>
    <td>Product 3</td>
    <td ng-model="three">120</td>
  </tr>
</table>
{{ one + two + three }}
<div>         
     

      
     

Answer №1

To incorporate data binding in Angular, consider using ng-bind

and additionally utilize ng-init

<table border=1 ng-app ng-init="one = 120;two = 120;three = 120;">

Check out Demo Fiddle 1

alternatively, perform initialization within the controller:

$scope.one = 120;
$scope.two = 120;
$scope.three = 120;

HTML

<table border=1 ng-app>
  <tr>
    <th>Products</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td ng-bind="one"></td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td ng-bind="two"></td>
  </tr>
  <tr>
    <td>Product 3</td>
    <td ng-bind="three"></td>
  </tr>
</table>

The outcome will display as: 360

View Demo Fiddle 2

Answer №2

Avoid using a div tag for input; opt for an input element instead. Additionally, when binding in HTML, make sure to multiply the value by 1 rather than just adding it as an expression to avoid resulting in a string.

DEMO

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>         
  <input type="text" ng-model="one">
  <input type="text" ng-model="two">
  <input type="text" ng-model="three">
  <input type="text" ng-model="four">
   <br>{{one * 1 + two * 1 + three * 1 + four * 1}}
 </div>

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

Retrieving User Keypad Input with Twilio Phone Calling in a Node.js Application (excluding web server)

const userInput = message.content.split(' ') const phoneNumber = userInput[1] const messageToSay = userInput.slice(2).join(' ') if (phoneNumber) { // Dial phoneNumber and deliver messageToSay, then gather ke ...

Leverage AngularJS $http.get method to continuously fetch JSON array upon scrolling

Here is a snippet of code that utilizes AngularJS to retrieve a JSON response. I am looking for assistance in implementing a functionality where the page should make additional requests when the user scrolls to the bottom, continuing until the JSON array ...

Ways to alter the default background color in material-ui

I am currently working on creating a dashboard for my company and I am looking to modify the default styles of some material components. Specifically, I want to change the background color of the Paper component without having to add my style to each ind ...

Incorporate Current and Total Slide Counters into Your Bootstrap 5 Carousel

How can I incorporate slide numbering into this Bootstrap 5 carousel example? I want to display the current slide number and the total number of slides in the carousel. The slide counters can be found in the carousel-pager div, where pager-current repres ...

jQuery: Repeated Triggering of Button Click Event

At my website, I am facing an issue with multiple buttons being loaded twice via ajax from the same file. The problem arises when the event associated with a button fires twice if that same button is loaded twice. However, it functions correctly if only o ...

Create a dynamic response in Angular based on the given date

I received a JSON response. Here is the Response JSON: [ { "price": 388, "created_date": "2019-07-30T17:01:38", "created_user": "PQR" }, { "price": 511, "created_da ...

Webpack resolve.alias is not properly identified by Typescript

In the Webpack configuration, I have set up the following: usersAlias: path.resolve(__dirname, '../src/pages/users'), In my tsconfig.json, you can find: "baseUrl": ".", "paths": { "usersAlias/*": ["src/pages/users/*"], } This is how the cod ...

Avoid Updating State After Adding Row in material-table

When utilizing the material-table library, my goal is to display a different component upon adding a row. Although the code functions as expected, I encountered the following error in the console: Warning: Can't perform a React state update on an unm ...

Multiplying form inputs using JavaScript

I am working on an HTML form that includes arrays: <form method="post" id="formaa" name="form"> <div id="fields"> <div id="divas1" class="row"> <a href="#" id="did1" onClick="d(this);"><img src="d.jpg" /></a& ...

Guide on populating a table with user input using jQuery and ajax

For the past few days, I've been attempting to populate a table using jQuery and ajax based on search results, but unfortunately, it's not working out for me. Below is the HTML code snippet: <form class="form"> <div class="form-gro ...

How should a successful post request be properly redirected in React?

I am in the process of learning React and currently working on a small project. I have set up a NodeJS server to handle my requests, and now I am facing an issue with redirecting the user after a successful login. I successfully dispatch an action and upda ...

The access token for Axios POST API in React is either missing, invalid, or has expired

To successfully upload an image to the server using Axios, I first need to obtain the apiKey and access_token, which I have managed to do and saved in localStorage. However, when attempting to upload an image, I encounter a "403" error message as indicated ...

Tips for utilizing multiple filters in AngularJS's $filter function

Two filters need to be applied on the content of a controller. The first filter should make the text lowercase, and the second one is a custom filter. I attempted to use them as follows: $filter('lowercase','cardShortNameRegex')(curre ...

Having issues with Next.js when trying to access elements using document.getElementById

Issue encountered: The value argument for the set operation failed due to an invalid key (__reactFiber$3ojngwn446u) in the property 'users.id.username.userN'. Keys must be non-empty strings and cannot contain ".", "#", "$", "/", "[", or "]". I r ...

Using an HTML element to pass a variable into a replace function

I am looking to highlight a 'SearchString' by replacing it with <span style="background-color: yellow">SearchString</span> within a targetString. The SearchString varies, so I am wondering how I can make this happen. This is what I ...

Guide on implementing a template within a form using Vue.js

I have set up a Vue instance for handling the form data var formInstance = new Vue({ el: '#amount_form', data: { logdate: '', amount:'', description:'' }, methods: { ...

Issue encountered: Unable to locate module during local npm package installation within React Application

When I created a new React app, I installed an npm package using the command npm i ../. However, when I tried to import the component in App.js, I encountered an error stating "Module not found: Can't resolve 'test-app-npm'". The package is ...

Troubleshooting the issue of onclick not functioning in JavaScript

My attempt to utilize onclick to trigger a function when the user clicks the button doesn't seem to be successful. For instance: function click(){ console.log('you click it!') } <input type='button' id='submitbutto ...

Issue with Angular variable not updating in the view, despite being successfully updated in the logs

This has been one of the most frustrating issues I've ever encountered. Snippet from my html file: <!--test_management.html--> <div ng-controller="TestCtrl as tcl"> <ul class="nav nav-tabs"> <li class="active"> ...

Invoke a JSP page using JavaScript

Hello, I'm new to web development and I have a question about calling JSP from a JavaScript file. My project consists of an html file with JavaScript (home.html) and a JSP file (login.jsp). In the home.html file, there are 2 textboxes and 2 buttons - ...