add the text value in angular js using onblur or onchange event

Question

  <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">0.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>

I want to add the {{thingstodo[0].cost + thingstodo[1].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 }}

Can't understand question add more information.

Manwal
– Manwal

2015-10-29 09:28:25 +00:00
Commented Oct 29, 2015 at 9:28 — Manwal
– Manwal, Commented Oct 29, 2015 at 9:28
Should be clearly explained.

Khalid Hussain
– Khalid Hussain

2015-10-29 09:35:55 +00:00
Commented Oct 29, 2015 at 9:35 — Khalid Hussain
– Khalid Hussain, Commented Oct 29, 2015 at 9:35

Ashley Coolman · Accepted Answer · 2015-10-29 10:00:48Z

1

I'm not entirely sure what the question asking, but I shall try and give you an answer to help get the question.

If you are trying to simply add the costs as the numbers change - you don't need to use ng-change, you can have the numbers automatically computute using databinding:

See here: http://jsfiddle.net/AshCoolman/8qnxukuh/2/

edited Oct 29, 2015 at 10:00

answered Oct 29, 2015 at 9:54

Ashley Coolman

11.7k5 gold badges63 silver badges87 bronze badges

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

3 Comments

Gowri Shankar T Over a year ago

Yes I got it but <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[rowContent].cost"> row content is dynamic value how can add that text box value.

Ashley Coolman Over a year ago

Hm. In the jsfiddle i provided, when you type new values into the two text boxes, it instanty (dynamically) adds them to create a new total. This is how I understood the question. Could you explain my misunderstanding if this is not what you are after?

Gowri Shankar T Over a year ago

MrWoGu · Accepted Answer · 2015-10-29 10:28:15Z

1

I think that i know what you want.

Check this:

app.filter('range', function () {
    return function (input, total) {
        total = parseInt(total);
        for (var i = 0; i < total; i++)
            input.push(i);
        return input;
    };
});

Html:

<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="rows">

<div ng-repeat="row in [] | range: rows">
   <input type="number" ng-model="thingstodo[$index].cost" />
</div>

Working demo: http://plnkr.co/edit/AbenOQGSSZyfCDVmd6ww

answered Oct 29, 2015 at 10:28

MrWoGu

1447 bronze badges

Collectives™ on Stack Overflow

add the text value in angular js using onblur or onchange event

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related