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

Question

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.

Nawnit Sen · Accepted Answer · 2018-09-27 07:19:23Z

1

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.

edited Sep 27, 2018 at 7:19

answered Sep 27, 2018 at 6:00

Nawnit Sen

1,0482 gold badges8 silver badges15 bronze badges

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

5 Comments

Sreekanth Reddy Balne Over a year ago

There is no method in the controller to calculate the item.total_amount = item.sale_quantity * item.mrp. I would like to have total_amount as property of item as well as sale_quantity. How to achieve that?

Nawnit Sen Over a year ago

@Shameless total_amount and sale_quantity are property of item object already right? cos you are accessing then as ` item. total_amount` and ` item. sale_quantity`

Sreekanth Reddy Balne Over a year ago

No. they aren't. I want them to be so. Take a look at saleItems

Nawnit Sen Over a year ago

@Shameless one way is after you get the response from rest service iterate in saleItems and assign property total_amount and sale_quantity to each object. another is you can change ng-change="m1()" in my answer to ng-chnage="item.total_amount = item.sale_quantity * item.mrp" and before that in first <td> tag add ng-init="item.total_amount=0;item.sale_quantity =0"

Sreekanth Reddy Balne Over a year ago

That did work. Please update your answer with the above comment alongside some explanation. Thanks.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related