How to add the dynamic textbox value in angular js using onblur or onchange event

Question

[![Please find my screen shot]

[!1]]]

<div style="background-color:#FFFFFF;min-height:color:#FFFFFF">
      <div style="background-color:#FFFFFF;height:40px;" > </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">                  
            <input type="text" placeholder="Material Name" ng-model="thingstodo[0].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[0].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[1].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[1].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[2].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[2].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[3].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[3].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[4].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[4].cost">
          </label>
        </div>
      </div>
      <div class="row" data-ng-repeat="rowContent in rows">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[rowContent].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[rowContent].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col" align="center"> </div>
        <div class="col col-75" align="right"> <i class="font25 icon ion-ios-plus-outline" ng-click="addRow()"></i>&nbsp;&nbsp;&nbsp;<i class="font25 icon ion-ios-minus-outline" ng-click="deleteRow($index)"></i></div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" readonly value="Labour Charges">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.labourcost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" readonly value="Service Charges">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.servicecost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button class="button button-block button-balanced">{{thingstodo[0].cost + thingstodo[1].cost + thingstodo[2].cost + thingstodo[3].cost + thingstodo[4].cost + thingstodo_additional.labourcost + thingstodo_additional.servicecost}}.00 RS</button>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button class="button button-block button-dark" ng-click="collectData()">Confirm</button>
        </div>
      </div>
    </div>

I want to add the {{thingstodo[0].cost + thingstodo1.cost + thingstodo[2].cost + thingstodo[3].cost + thingstodo[4].cost + thingstodo_additional.labourcost + thingstodo_additional.servicecost}} and also want to add the dynamic textbox value {{ thingstodo[rowContent].cost }}

Cost field see my image i.sstatic.net/T9lT6.png. Add that cost field while entering the value and show on the spot in the green color button. — Gowri Shankar T
– Gowri Shankar T, Commented Nov 5, 2015 at 6:29

Partha Sarathi Ghosh · Accepted Answer · 2015-11-05 06:40:00Z

1

Create a Filter as follows

angular.module('app', []).filter('totalCost', function() {
  return function(inputs) {
    var sum = 0;
    angular.forEach(inputs,function(v,k){
        sum = sum + parseInt(v.cost);
    }); 
    return sum ;
  };
});

Then use the following expression

{{(thingstodo|totalCost) + thingstodo_additional.labourcost + thingstodo_additional.servicecost}}

answered Nov 5, 2015 at 6:40

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Partha Sarathi Ghosh Over a year ago

@GowriShankarT If it is working then please accept my answer.

Collectives™ on Stack Overflow

How to add the dynamic textbox value in angular js using onblur or onchange event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related