Expanding the scope value in Angular through ng-repeat iteration

Question

Expanding the scope value in Angular through ng-repeat iteration

Is it possible to increase the value in $scope by using values from an ng-repeat loop?

Here is the code snippet I am working with:

<div ng-repeat="field in selected.inhoud.fields">
  <p>Field Name: {{field.title}}</p>
  <p>Size in %:
    <input type="range" min="10" max="80" ng-model="field.width" ngvalue="field.width" />
  </p>
</div>

How can I calculate the total width of all field.width values?

Thank you

javascript angularjs

Answer 1

Answer №1

To improve your code, consider defining a function that takes a parameter (in this case $index) and performs any necessary calculations.

<div ng-repeat="field in selected.inhoud.fields">
        <p>Field Name: {{field.title}}</p>
        <p>Size in %: {{ calculateValue($index) }}
           <input type="range" min="10" max="80" ng-model="field.width" ngvalue="field.width"/>
        </p>
    </div>

var app = angular.module('angularjs-app', []);
app.controller('MainCtrl', function($scope) {

  $scope.data.calculateValue = function(index){
     console.log('calculated value:'+index*.1);
     $scope.increment += index; 
  }; 

  console.log($scope.increment);
});

Answer 2

To improve your code, consider defining a function that takes a parameter (in this case $index) and performs any necessary calculations.

<div ng-repeat="field in selected.inhoud.fields">
        <p>Field Name: {{field.title}}</p>
        <p>Size in %: {{ calculateValue($index) }}
           <input type="range" min="10" max="80" ng-model="field.width" ngvalue="field.width"/>
        </p>
    </div>

var app = angular.module('angularjs-app', []);
app.controller('MainCtrl', function($scope) {

  $scope.data.calculateValue = function(index){
     console.log('calculated value:'+index*.1);
     $scope.increment += index; 
  }; 

  console.log($scope.increment);
});

Expanding the scope value in Angular through ng-repeat iteration

Answer №1

Similar questions

Checking the URL in Redux Form

Executing a child function from the parent component in React 16

updateStatusCallback function is not defined in the Facebook example using jQuery

Flask not serving Favicon and images to a React application

Incorporate a dynamic fading effect for text and images using JQuery

React JS - Building a dynamic multi-tiered dropdown navigation system

Converting a Base64 URL to an image object: A step-by-step guide

Avoid repeated rendering in Vue v-for loops

Is it possible to create an <h1> heading that can be clicked like a button and actually do something when clicked?

Sending Information from Node/Express to Client-Side JavaScript

Remain on the React page following an HTTP POST request to Flask

Styling on Material UI Button disappears upon refreshing the page

"Enhance input functionality by updating the value of the text input or resizing the textbox

Is there a way to track down the origin of an AngularJS scope visible in Batarang?

Tips for organizing parallel arrays with the provided data

Monitoring the content of a page with jQuery and adjusting the size as needed

A helpful guide on including an image file from a form in a jQuery ajax request

Apply a class to the input element within an ng input tag

Concatenate a variable string with the JSON object key

The function body.getReader() doesn't seem to be functioning properly on Ubuntu