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

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>