設置文本框中的值取決於另一個文本框使用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>