CODEWITHSUNDEEP
javascriptangularjshtml
Sreekanth Reddy Balne
Sreekanth Reddy Balne

Reputation: 3424

Angularjs: Adding custom properties or fields or calculations to a Json object

I am new to angularjs. I have a Rest service which sends the below data of saleItems on get request.

saleItems = [
  {
    "id": 236,
    "variant": "Oval Holder",
    "mrp": "66.00"
  },
  {
    "id": 237,
    "variant": "Angle Holder",
    "mrp": "52.00"
  }
]

And my template looks like:

<table>
  <tr><th>Sale Invoice</th></tr>
  <tr>
    <th>No.</th>
    <th>Item.</th>
    <th>Quantity</th>
    <th>Rate</th>
    <th>Discount</th>
    <th>Discount Amount</th>
    <th>Total Amount</th>
  </tr>
  <tr ng-repeat="item in $ctrl.saleItems | filter:$ctrl.query | orderBy:$ctrl.orderProp">
    <td>{{$index + 1}}</a></td>
    <td>{{item.variant}}</td>
    <td><input type="text" value="{{item.sale_quantity}}"></td>
    <td class='amt'>{{item.mrp | currency : "₹" : 2}}</td>
    <td class='amt'><input type="text" placeholder="0.00" value="{{item.discount_percent}}"></td>
    <td class='amt' >{{item.total_amount | currency : "₹" : 2}}</td>
  </tr>
  <tr><td>{{sale_total_amount}}</td></tr>
</table>

As you can see from the above template, I would like to have an input for item.sale_quantity, item.discount_percent and a readonly field item.total_amount.

Whenever the item.sale_quantity is updated, then the item.total_amount field should also be updated, along with sale_total_amount(sum of all item.total_amount's for each row).

Moreover I would like to do some validation in the controller against item.sale_quantity.

Just looking for some insights. Noob here.

Upvotes: 0

Views: 78

Answers (1)

Nawnit Sen
Nawnit Sen

Reputation: 1038

Use ng-change. ng-change ="expression" evaluates the expression whenever there is change in value of data where ng-change is used.

So first initialise the item.total_amount and item.sale_quantity by adding ng-init="item.total_amount=0;item.sale_quantity =0" in first <td> tag and then replace

<td><input type="text" value="{{item.sale_quantity}}"></td> with

<td><input type="text" value="{{item.sale_quantity}}" ng-chnage="item.total_amount = item.sale_quantity * item.mrp"></td>

.

So now whenever there is change in item.sale_quantity expression item.total_amount = item.sale_quantity * item.mrp will be evaluated and newly calculated value will be assigned in item.total_amount.

Upvotes: 1

Related Questions