代码之家 › 专栏 › 技术社区 › Lee Merlas

天然气变更时如何保留原值

angularjs html javascript

Lee Merlas · 技术社区 · 7 年前

我试图根据输入获得折扣值,我希望它是动态的,所以我尝试这样做。 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>

它仍然有同样的问题

1 回复 | 直到 7 年前

Protozoid 7 年前

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>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前