javascript - Angularjs:向 Json 对象添加自定义属性或字段或计算

Question

我是 AngularJS 的新手。我有一个 Rest 服务，它在获取请求时发送 saleItems 的以下数据。

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

我的模板看起来像:

<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>

正如您从上面的模板中看到的，我想要输入 item.sale_quantity、item.discount_percent 和 readonly 字段item.total_amount。

每当更新 item.sale_quantity 时，item.total_amount 字段以及 sale_total_amount(所有商品的总和)也应更新每行的 item.total_amount)。

此外，我想在 Controller 中针对 item.sale_quantity 进行一些验证。

只是寻找一些见解。菜鸟在这里。

Answer 1

使用ng-change 。 ng-change ="expression"每当数据值发生变化时计算表达式，其中 ng-change已使用。

因此，首先通过添加来初始化 item.total_amount 和 item.sale_quantity ng-init="item.total_amount=0;item.sale_quantity =0"首先<td>标签然后替换

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

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

.

现在只要 item.sale_quantity 有变化表达item.total_amount = item.sale_quantity * item.mrp将进行评估，并将新计算的值分配到 item.total_amount 中。