Techniques for Extracting the Values of all ng-models within an ng-repeat Loop

How do I retrieve the total value of all ng-models within an ng-repeat loop using AngularJS? Below is my HTML code:

    <div ng-repeat="kind in plans.availableOptions">
              <span class="payLabel text-left">{{kind.name}}</span>
              <input class="payLabel" type="text" ng-model="kind.number" />
              {{priceAll}}<!--priceAll is the sum of the input-->
    </div>

Next, here is my controller:

$scope.plans={availableOptions:[{name:'by cash',id:'1'},{name:'by credit',id:'2'}],otherParam:{}}
$scope.priceAll=0;

As a beginner in AngularJS, I am looking for guidance on how to calculate the total sum of the number inputs.

javascriptangularjs

Answer №1

Give this a shot!

$scope.total = function() {
  return $scope.plans.availableOptions.filter(function(item) {
    return item.number;
  }).map(function(item) {
    return item.number;
  }).reduce(function(prev, curr) {
    return +prev + +curr;
  }, 0);
}

HTML

<div ng-repeat="option in plans.availableOptions">
  <span class="payLabel text-left">{{option.name}}</span>
  <input class="payLabel" type="text" ng-model="option.number" /> 
  <!--total is the sum of all input values-->
</div>
{{total()}}

JSFIDDLE

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

Exploring effective testing approaches for C++ plugins in Node.js

When working on Node JS, I have experience creating native C++ modules. However, my testing approach typically involves writing tests for these modules in Javascript. I am curious if this is an effective test strategy or if there are more optimal ways to ...

javascriptc++node.jsdebuggingtdd

Inject components in Angular using dependency injection

Can components in Angular be dependency injected? I am interested in a solution similar to injecting services, like the example below: my.module.ts: providers: [ { provide: MyService, useClass: CustomService } ] I attempted using *ngIf= ...

javascriptangulartypescriptangular8angular-dependency-injection

Searching for values within an array of objects by iterating through nested arrays to apply a filter

Having trouble returning the testcaseid from an array to this.filteredArray Able to fetch header value and all values of the array when the search word is empty. Seeking assistance with iterating through the testcaseid and header on the search input fiel ...

javascripttypescript

Retrieve the contents of the browser's DOM from within an Android operating system runtime

Imagine a typical login page similar to the one depicted below: https://i.stack.imgur.com/SF1Bd.jpg To interact with the HTML elements within the DOM, we can utilize either jQuery or conventional JavaScript like so: https://i.stack.imgur.com/e5aQZ.png ...

javascriptandroidjqueryhtmldom

Removing a function when changing screen size, specifically for responsive menus

$(document).ready(function () { // retrieve the width of the screen var screenWidth = 0; $(window).resize(function () { screenWidth = $(document).width(); // if the document's width is less than 768 pixels ...

javascriptjquerycss

I need a counter in my React application that is triggered only once when the page scrolls to a specific element

I've encountered a challenge with a scroll-triggered counter on a specific part of the page. I'm seeking a solution using React or pure JavaScript, as opposed to jQuery. Although I initially implemented it with states and React hooks, I've ...

javascriptreactjscounter

Sticky positioning with varying column widths

How can I create HTML and CSS columns that stick together without manually specifying the "left:" parameter every time? The current example in the fiddle achieves what I want, but requires manual setting of the "left:" value. Is there a way to make this m ...

javascripthtmlcss

Discover the process of loading one controller from another controller in Angular JS

Is it possible to load an entire controller1 from a different controller2, not just a function? ...

javascriptangularjs

Optimizing Page Load Time in AngularJS with the ng-include Directive

My current challenge involves populating a page in stages. There are multiple categories with varying numbers of items, and my code structure resembles the following (warning: slightly jumbled). $scope.getItems = function(key) { $http.get('get-item ...

angularjs

Why is the body the last element in Angular modules arrays?

I have a question regarding architectural practices. When defining an Angular module, one common approach is to do it like this: angular.module('app', []) .controller('Ctrl', ['$scope', function Ctrl($scope) { //body.. ...

javascriptangularjs

Check out our website's event countdown timer featuring a server-sided event tracking system

Currently, I am in the process of developing a website and have the requirement to incorporate a timer on one of the pages. The goal is for the timer to count down from a specified time, such as DD::hh:mm 02:12:34, until it reaches zero. Once the countdown ...

javascriptphpjqueryweb

How come my invocation of (mobx) extendObservable isn't causing a re-render?

Can't figure out why the render isn't triggering after running addSimpleProperty in this code. Been staring at it for a while now and think it might have something to do with extendObservable. const {observable, action, extendObservable} = mobx; ...

javascriptreactjsmobx

difficulty with displaying the following image using jquery

I have referenced this site http://jsfiddle.net/8FMsH/1/ //html $(".rightArrow").on('click',function(){ imageClicked.closest('.images .os').next().find('img').trigger('click'); }); However, the code is not working ...

javascriptjquerycsshtml

Create a complete duplicate of a Django model instance, along with all of its associated

I recently started working on a Django and Python3 project, creating a simple blog to test my skills. Within my project, I have defined two models: class Post(models.Model): post_text = models.TextField() post_likes = models.BigIntegerField() post_ ...

javascriptpythondjangopython-3.xcopy

Encountering the error message "Attempting to access properties of undefined (specifically 'map')". Despite having the array properly declared and imported

I am facing an issue while trying to iterate through an array and display names for each person. Despite declaring the array properly, it is returning as undefined which is causing the .map function to fail. Can you help me figure out where I am making a m ...

javascriptreactjsarraysnext.js

What does the `Class<Component>` represent in JavaScript?

Apologies for the lackluster title (I struggled to think of a better one). I'm currently analyzing some Vue code, and I stumbled upon this: export function initMixin (Vue: Class<Component>) { // ... } What exactly does Class<Component> ...

javascriptecmascript-6vue.js

CSS translation animation fails to execute successfully if the parent element is visible

Inquiries similar to this and this have been explored, but do not provide a solution for this particular scenario. The objective is to smoothly slide a menu onto the screen using CSS translation when its parent is displayed. However, the current issue is ...

javascriptjqueryhtmlcss

The art of posting with ExpressJS

I'm encountering a problem where the data submitted through a form to my POST route is not getting passed on to a database document, even though the redirection works fine. I'm unsure of how to troubleshoot this issue. blogpost-create.ejs &l ...

javascriptnode.jsmongodbexpress

AngularJS: Troubleshooting a Service Function with a Dysfunctional For/In

I am facing an issue with a for/in loop within a function that is not functioning properly. $scope.items = []; jobslisting.getJobs(function(data){ for(var i = 0; i < data.length; i++){ $scope.items.push({name:data[i]}); } con ...

angularjsobjectfor-loopservice

Generating a unique serial ID using Angular/JS

I am in the process of developing a function that will create a unique serial id by replacing a string with the format; xxxx-xxxx-xxxx-xxxx. The desired outcome is a serial like this: ABCD-1234-EFGH-5678, where the first and third parts consist of letters ...

javascriptangulartypescriptrandomuuid