Question

假设我有标签显示总金额和两个额外文本框第一个用于折扣百分比，第二个用于折扣百分比计算。

如果用户输入第二个文本框总折扣，则用户可以自由输入，如果用户输入第一个文本框折扣百分比，则第一个文本框再次显示该输入金额的百分比，然后第二个文本框将显示计算的折扣。记住标签文字中的总金额。

提前致谢

Answer 1

尝试这个概念：

    $scope.itemNames = [
    {item: 'Shirt', qty: 2, price: 600},
    {item: 'Caps', qty: 3, price: 100},
    {item: 'Sunglass', qty: 2, price: 300}
  ];

  $scope.total = function () {
    var total = 0;
    angular.forEach($scope.itemNames, function (value) {
      total += value.qty * value.price;
    });
    return total;
  };
  var totalAmt = $scope.total();
  $scope.discountPer = function () {
    if ($scope.totalDisc) {
      $scope.discount = ($scope.totalDisc *100)/totalAmt;
    }
  };
  $scope.totalDiscount = function () {
    if ($scope.discount) {
      $scope.totalDisc = (totalAmt*$scope.discount)/100;
    }
  };

在你的HTML中：

<div class="table">
    <table class="table table-bordered table-responsive">
      <tr>
        <th>Item</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Unit Price in Rs</th>
      </tr>
      <tr ng-repeat="item in itemNames">
        <td>{{item.item}}</td>
        <td><input type="number" min="0" ng-model="item.qty"></td>
        <td><input type="number" min="0" ng-model="item.price"></td>
        <td>{{item.qty * item.price}}</td>
      </tr>
    </table>
    <label>Discount</label>  
    <input type="number" name="discount" ng-change="totalDiscount()" ng-model="discount">% <br/>
    <label>Total Discount</label>  
    <input type="number" name="totalDiscount" ng-change="discountPer()" ng-model="totalDisc"/><br/>

    <span class="col-md-offset-5 col-xs-offset-5 col-sm-offset-5">Total : {{total() - totalDisc}} </span>
  </div>

set文本框中的值取决于使用AngularJS的另一个文本框

1 个答案: