时间戳

首页 > 解决方案 > 如何在 ng-change 中保留原始值

javascript - 如何在 ng-change 中保留原始值

问题描述

我试图根据输入获得折扣值，我希望它是动态的，所以我尝试这样做ng-change="detail.total = detail.total - ((detail.discount/100)*detail.total)"但它不起作用，因为它会引用新更改detail.total的 ，实际上应该引用旧的、未更改的值。

这是一个代码片段：

<ui-select ng-model="detail.item" theme="bootstrap" ng-change="detail.price = detail.item.price">
    <ui-select-match placeholder="Select item" allow-clear>{$$select.selected.name$}</ui-select-match>
        <ui-select-choices repeat="item in main.items | propsFilter: {name: $select.search, price: $select.search} | limitTo: 100">
            <div ng-bind-html="item.name | highlight: $select.search"></div>
        </ui-select-choices>
</ui-select>
<input type="text" ng-model="detail.qty" ng-change="detail.total = (detail.qty * detail.price)">
<input type="text" ng-model="detail.price" ng-change="detail.total = (detail.qty * detail.price)">
<input type="text" ng-model="detail.discount" ng-change="detail.total = detail.total - ((detail.discount/100)*detail.total)>
<input readonly type="text" ng-model="detail.total">

我在这里做错了什么？

编辑：试图在我的控制器内进行 -

this.new_total = function(total, discount){
    var total_c = angular.copy(total);
    var discount_c = angular.copy(discount);

    discount_c = discount_c/100;

    var final = total_c - (discount_c*total_c);
    return final;
}

然后我通过这样做来调用它：

<td><input type="text" class="form-control" ng-model="detail.discount" ng-change="detail.total = main.new_total(detail.total, detail.discount);"></td>

它仍然有同样的问题

标签： javascripthtmlangularjs

解决方案

正如评论中所建议的，每次发生变化时，使用控制器中的函数来更新总数。

请参见下面的示例：

var app = angular.module("App", []);

app.controller("main", ['$scope', function ($scope) {
    $scope.detail = {
        'item': null,
        'price': null,
        'qty': null,
        'discount': null,
        'total': null
    };
    
    $scope.updateTotal = function () {
      var totalBeforeDiscount = ($scope.detail.qty * $scope.detail.price);
      $scope.detail.total = totalBeforeDiscount - (totalBeforeDiscount * ($scope.detail.discount / 100));
    }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="App" ng-controller="main">
  <div>
    <label>Quantity</label>
    <input type="text" ng-model="detail.qty" ng-change="updateTotal()">
  </div>
  <div>
    <label>Price</label>
    <input type="text" ng-model="detail.price" ng-change="updateTotal()">
  </div>
  <div>
    <label>Discount (%)</label>
    <input type="text" ng-model="detail.discount" ng-change="updateTotal()">
  </div>
  <div>
    <label>Total</label>
    <input readonly type="text" ng-model="detail.total">
  </div>

</div>

推荐阅读