Tips for computing values with changing ng-model identifiers

Question

Tips for computing values with changing ng-model identifiers

In my angular application, I have a function that creates tables using directives. Each field in the tables must have unique ng-model names so that I can calculate each table individually. To achieve this, I implemented a counter that increments with each added table and appends the current count to the end of each ng-model name for every field (you can refer to my plunkr link for more details).

However, I'm facing an issue with my $scope.total function which sums the fields. It works fine with static ng-model names but I'm struggling to concatenate the ng-model names with the current count to ensure the function calculates each table separately when adding a number after each ng-model. How can I modify my $scope.total function to work with dynamic ng-model names?

Here is my plunkr

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.count = 0;

$scope.total = function(count){
var total = 
// I want to parseFloat the $scope.td1 + the current count.
// How does the syntax look when you concat ng-model.
parseFloat($scope.td1 + count || 0) + 
parseFloat($scope.td2 + count || 0) + 
parseFloat($scope.td3 + count || 0) +  
parseFloat($scope.td4 + count || 0) +  
parseFloat($scope.td5 + count || 0);
return total || 0;
}
});

Edit: I have also added a new input to my plunkr that should display the sum of the "total" in the first two generated tables. However, this functionality is currently not working as expected and I am unable to determine the cause. I introduced a new function to summarize the totals from the first two tables.

javascript angularjs

Answer 1

Answer №1

To access an object property in JavaScript, you can use either the pointed notation (object.property) or the named array notation (object['property']).

For example, if you have variables set like this:

$scope.td12 = 10;
$scope.td1 = 3;
count = 2;

// This will return 5
$scope.td1 + count;

// This will return $scope.td12 which is equal to 10
$scope['td1'+count];

Answer 2

To access an object property in JavaScript, you can use either the pointed notation (object.property) or the named array notation (object['property']).

For example, if you have variables set like this:

$scope.td12 = 10;
$scope.td1 = 3;
count = 2;

// This will return 5
$scope.td1 + count;

// This will return $scope.td12 which is equal to 10
$scope['td1'+count];

Answer 3

Answer №2

Revise your total function with the updated code provided below. It should resolve the issue. You can find the revised plunk at this link - http://plnkr.co/edit/vRSQOvRVkUKLZ1ihvBp4?p=preview

$scope.total = function(count){
    // Make sure to parseFloat the $scope.td1 + current count.
    // Double check the syntax for concatenating ng-model values.
    var total = 
    parseFloat($scope["td1" + count] || 0) + 
    parseFloat($scope["td2" + count] || 0) + 
    parseFloat($scope["td3" + count] || 0) +  
    parseFloat($scope["td4" + count] || 0) +  
    parseFloat($scope["td5" + count] || 0);
    return total || 0;
}

Answer 4

Revise your total function with the updated code provided below. It should resolve the issue. You can find the revised plunk at this link - http://plnkr.co/edit/vRSQOvRVkUKLZ1ihvBp4?p=preview

$scope.total = function(count){
    // Make sure to parseFloat the $scope.td1 + current count.
    // Double check the syntax for concatenating ng-model values.
    var total = 
    parseFloat($scope["td1" + count] || 0) + 
    parseFloat($scope["td2" + count] || 0) + 
    parseFloat($scope["td3" + count] || 0) +  
    parseFloat($scope["td4" + count] || 0) +  
    parseFloat($scope["td5" + count] || 0);
    return total || 0;
}

Answer 5

Answer №3

An effective strategy is to develop a self-contained table directive that manages its own total and notifies the parent scope when changes occur.

This eliminates the need for confusing counters and cluttering up a single scope with properties for each input.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  // the totals for each of the tables
  $scope.totals = [];
  $scope.grandTotal = 0;
  // whenever one of the table's total changes, it calls this function
  // with its new total, so we can update our grand total
  $scope.changeTotal = function(index, total) {
    $scope.totals[index] = total;
    $scope.grandTotal = sum($scope.totals);
  }
});

app.directive('myTable', function() {
  return {
    restrict: 'E',
    scope: {
      onTotalChange: '&'
    },
    templateUrl: 'table.html',
    link: function($scope) {
      $scope.values = [];
      // whenever one of the values the inputs are bound to changes,
      // recalculate the total for this table and inform the parent scope
      $scope.$watchCollection('values', function(values) {
        $scope.onTotalChange({
          total: sum(values)
        });
      });
    }
  }
});

// easily sum an array of values in modern browsers
function sum(values) {
  return values.reduce(function(a, b) {
    return a + b
  }, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <p>Grand total: {{grandTotal}}</p>
  <!-- Click the button to add a new entry to the totals array
       and display a new table -->
  <button ng-click="totals.push(0)">New table</button>
  <!-- Render a new table for each entry in the totals array.
       Update the total in the array when the table's total changes. -->
  <my-table ng-repeat="i in totals track by $index" on-total-change="changeTotal($index, total)">
  </my-table>

  <!-- Allow the directive to specify a templateUrl of 'table.html' without
     fetching it from the server -->
  <script type="text/ng-template" id="table.html">
    <table>
      <thead>
        <tr>
          <th>head 1</th>
          <th>head 2</th>
          <th>head 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="number" ng-model="values[0]">
          </td>
          <td>
            <input type="number" ng-model="values[1]">
          </td>
          <td>
            <input type="number" ng-model="values[2]">
          </td>
        </tr>
        <tr>
          <td>
            <input type="number" ng-model="values[3]">
          </td>
          <td>
            <input type="number" ng-model="values[4]">
          </td>
          <td>
            <input type="number" ng-model="values[5]">
          </td>
        </tr>
      </tbody>
    </table>
  </script>
</div>

Answer 6

An effective strategy is to develop a self-contained table directive that manages its own total and notifies the parent scope when changes occur.

This eliminates the need for confusing counters and cluttering up a single scope with properties for each input.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  // the totals for each of the tables
  $scope.totals = [];
  $scope.grandTotal = 0;
  // whenever one of the table's total changes, it calls this function
  // with its new total, so we can update our grand total
  $scope.changeTotal = function(index, total) {
    $scope.totals[index] = total;
    $scope.grandTotal = sum($scope.totals);
  }
});

app.directive('myTable', function() {
  return {
    restrict: 'E',
    scope: {
      onTotalChange: '&'
    },
    templateUrl: 'table.html',
    link: function($scope) {
      $scope.values = [];
      // whenever one of the values the inputs are bound to changes,
      // recalculate the total for this table and inform the parent scope
      $scope.$watchCollection('values', function(values) {
        $scope.onTotalChange({
          total: sum(values)
        });
      });
    }
  }
});

// easily sum an array of values in modern browsers
function sum(values) {
  return values.reduce(function(a, b) {
    return a + b
  }, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <p>Grand total: {{grandTotal}}</p>
  <!-- Click the button to add a new entry to the totals array
       and display a new table -->
  <button ng-click="totals.push(0)">New table</button>
  <!-- Render a new table for each entry in the totals array.
       Update the total in the array when the table's total changes. -->
  <my-table ng-repeat="i in totals track by $index" on-total-change="changeTotal($index, total)">
  </my-table>

  <!-- Allow the directive to specify a templateUrl of 'table.html' without
     fetching it from the server -->
  <script type="text/ng-template" id="table.html">
    <table>
      <thead>
        <tr>
          <th>head 1</th>
          <th>head 2</th>
          <th>head 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="number" ng-model="values[0]">
          </td>
          <td>
            <input type="number" ng-model="values[1]">
          </td>
          <td>
            <input type="number" ng-model="values[2]">
          </td>
        </tr>
        <tr>
          <td>
            <input type="number" ng-model="values[3]">
          </td>
          <td>
            <input type="number" ng-model="values[4]">
          </td>
          <td>
            <input type="number" ng-model="values[5]">
          </td>
        </tr>
      </tbody>
    </table>
  </script>
</div>

Tips for computing values with changing ng-model identifiers

Answer №1

Answer №2

Answer №3

Similar questions

The lite-server is unable to find an override file named `bs-config.json` or `bs-config.js`

Using protractor's onPrepare feature to set up for various test suites

Setting up Vagrant with Xvfb Troubleshooting

Engaging with the crossrider sidepanel extension

Tips for creating an SVG element on a plane using THREE.js

The redesigned pie chart animations in d3 are experiencing glitches

Struggling to make image uploading function with Flask and JQuery

Bootstrap: when divs cover the jumbotron

What is the best way to send props and trigger a function with a single onclick event?

Trouble arises when implementing AJAX in conjunction with PHP!

Arranging xCharts based on the weekday order

AngularJS: A guide to clicking with the mouse and using the Enter key on the ng-grid

When transitioning between different node.js apps, the URL localhost:3000 remains constant

Collapse in Bootstrap 3 Navigation Bar

Using ReactJS to capture keydown events from an iframe

Show the information stored in an array using Angular

IE displays unresolved list instead of content in AngularJs multiple select

What is the best way to determine the total number of rows that have been generated by the Asp:Repeater?

"Exploring the process of making Ajax calls to a specific URL using a

Experiencing issues with receiving null values in formData when using React hooks