Question

我是angularjs的新手。我有一个Rest服务，该服务根据get请求发送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的总和）。

此外，我想在控制器中针对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 中分配新计算的值。

Angular.js：将自定义属性或字段或计算添加到Json对象

1 个答案: