CODEWITHSUNDEEP
angularjshtml
Shailesh Bhardwaj
Shailesh Bhardwaj

Reputation: 45

In angularjs how to calculate dynamic text box value (days and hours) through array

Doing a program to calculate dynamic value of days and hours by using array. right now i am getting only one box of calculation but i need to calculate nth div. Please suggest how to achieve this. I will appreciate your effort. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script>
angular.module('test', [])

.controller('Test', function($scope) {
  $scope.inputs = [{}]; // default 1 sets

  $scope.add = function() {
    $scope.inputs.push({});
  }

  $scope.getTotal = function() {
    var total = 0
    angular.forEach($scope.inputs, function(value) { // loop over array to process all items
      total += (value.param2 - value.param1)/1000/60/60/24;
    });

    return total;
  }

  $scope.getTotalTime = function() {
    var totalHours = 0
    angular.forEach($scope.inputs, function(value) { // loop over array to process all items
      totalHours += (value.param4 - value.param3)/1000/60/60;
    });

    return totalHours;
  }

  $scope.remove = function(item) {
    angular.forEach($scope.inputs, function(value, key) {
      if (value == item) {
        $scope.inputs.splice(key, 1);
      }
    });
  }
});
</script>

</head>

<body>
<div ng-app='test' ng-controller='Test'>
  <div ng-repeat='input in inputs' ng-init="input.param1 = input.param2 = input.param3 = ''">
   Start Date <input type='date' ng-model='input.param1'>
    <!-- assign ng-model to local variable -->
    End Date  <input type='date' ng-model='input.param2'> = {{days = (input.param2 - input.param1)/1000/60/60/24}}

    <br />
    Start Time <input type="time" ng-model='input.param3' />
    End Time <input type="time" ng-model='input.param4' /> = {{hours = (input.param4 - input.param3)/1000/60/60}}



<br /><br>
    <button type='button' ng-click='remove(input)'>Remove</button>
  </div>

  <div>
    <button type='button' ng-click='add()'>Add</button>
  </div>
  <br>
  <br>
  <div>TotalDays = {{getTotal()}}</div>
   <div>TotalTime = {{getTotalTime()}}</div>
</div>
</body>
</html>

Upvotes: 1

Views: 1880

Answers (2)

Icycool
Icycool

Reputation: 7179

You are half way there on using ng-repeat. If you want to store variables (e.g. ng-models) you would want to store it inside the local reference of each item (input in this case). This variable would not be accessible outside ng-repeat, so you'll need to do a forEach to process all of them.

angular.module('test', [])

.controller('Test', function($scope) {
  $scope.inputs = [{}, {}]; // default 2 sets

  $scope.add = function() {
    $scope.inputs.push({});
  }

  $scope.getTotal = function() {
    var total = 0
    angular.forEach($scope.inputs, function(value) { // loop over array to process all items
      total += value.param1 + value.param2 - value.param3;
    });

    return total;
  }

  $scope.remove = function(item) {
    angular.forEach($scope.inputs, function(value, key) {
      if (value == item) {
        $scope.inputs.splice(key, 1);
      }
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

<div ng-app='test' ng-controller='Test'>
  <div ng-repeat='input in inputs' ng-init="input.param1 = input.param2 = input.param3 = ''">
    <input type='number' ng-model='input.param1'>+
    <!-- assign ng-model to local variable -->
    <input type='number' ng-model='input.param2'>-
    <input type='number' ng-model='input.param3'>= {{input.param1 + input.param2 - input.param3}}

    <button type='button' ng-click='remove(input)'>Remove</button>
  </div>

  <div>
    <button type='button' ng-click='add()'>Add</button>
  </div>
  <br>
  <br>
  <div>Total = {{getTotal()}}</div>
</div>

Edit: Remove looks tricky but once you know the way it'll be a breeze next time!

The thing is, angular model is a (almost) real time thing, you don't need to "subtract", it will just run the add code again and get the correct value.

Upvotes: 1

Nitish
Nitish

Reputation: 109

i am not sure but you have to use ng-repeat for this

<div ng-app="" ng-init="final_day=[]">
<ul>
  <li ng-repeat="x in final_days">
    {{final_days[] = x.days + days }}
  </li>
</ul>
</div>

Upvotes: 0

Related Questions