Question

我正在开发分销软件，因为我是角色的新手我最后一天用ng-model遇到麻烦我有几个输入字段我正在使用ng-model进行加法乘法操作它工作正常直到我输入值但是当我使用ajax带来值时它会继续工作并且不进行数学运算。

例如：product_rate字段，pieces字段，quantity字段和amount字段。

<input id="rate_per_unit" name="rate_per_unit" ng-model="rate_per_unit" type="text" placeholder="0.00" required="required">

<input id="pcs" name="pcs" type="text" ng-model="quantity" placeholder="0" required="required">
<input id="quantity" name="quantity" value="{{ bonus -(-quantity) }}" type="text" placeholder="0" required="required">

<input id="amount" name="amount" value="{{ ((rate_per_unit * quantity) - cash_discount) -(-bonus * rate_per_unit) }}" type="text" placeholder="0.00%" required="required">

当用户手动输入值时，数学运算工作会很精细，但是当我在rate_per_unit字段中输入值并直接在件字段中输入时，它会在金额字段中停止数学运算。

我想要的是rate_per_unit字段中存在的值，如下所示：

<input type="text" ng-model="rate_per_unit" value"1000">

我只需输入pieces字段来执行乘法运算就像我只输入10件一样，它会与rate_per_unit字段相乘。

带有角度的标记：

<div class="row">
                    <div class="input-field col s2">
                        <input id="rate_per_unit" name="rate_per_unit" ng-model="rate_per_unit" type="text" placeholder="0.00" required="required">
                        <label for="contact">Rate Per Unit</label>   
                    </div>

                      <div class="input-field col s2">
                        <input id="pcs" name="pcs" type="text" ng-model="quantity" placeholder="0" required="required">
                        <label for="pcs">PCS</label>

                      </div>

                      <div class="input-field col s2">
                        <input id="quantity" name="quantity" value="{{ bonus -(-quantity) }}" type="text" placeholder="0" required="required">
                        <label for="quantity">Quantity</label>
                      </div>

                      <div class="input-field col s1">
                        <input id="bonus" name="bonus" type="text" ng-model="bonus" placeholder="0" required="required">
                        <label for="bonus">Bonus</label>
                      </div>


                      <div class="input-field col s2">
                        <input id="percent" name="percent" type="text" ng-model="percent" placeholder="0">
                        <label for="percent">Percent</label>
                      </div>

                      <div class="input-field col s2">
                        <input id="percent_per_product" name="percent_per_product" type="text" placeholder="0">
                        <label for="percent_per_product">Percent per Product</label>
                      </div>

                      <div class="input-field col s2">
                        <input id="discount" name="cash_discount" type="text" ng-model="cash_discount" placeholder="0">
                        <label for="discount">Cash Discount</label>
                      </div>
                      <div class="input-field col s2">
                        <input id="amount" name="amount" value="{{ ((rate_per_unit * quantity) - cash_discount) -(-bonus * rate_per_unit) }}" type="text" placeholder="0.00%" required="required">
                        <label for="amount">Amount</label>
                      </div>

                    </div>

这里是rate_per_unit

的ajax请求

$（“＃product_id”）。on（“select2：close”，function（）{

    $.ajax({
      url: 'get_product_specification',
      type: 'post',
      dataType: 'json',
      data:'id='+$(this).val(),
      success:function(data)
      {
        $('#rate_per_unit').val(data.trade_price);
      }
    });

    $('#rate_per_unit').focus();  
});

Answer 1

问题是我是通过ajax请求向textbox注入价值并且没有将ng-model变量绑定到控制器的范围而我忽略了角度控制器的全部内容并且范围是第一个重要的规则角度不会超出范围。

ng-model应保留在范围内，每个值都应该与控制器的范围绑定。

在我在js文件中使用ajax之前..

$("#product_id").on("select2:close",function() {
    $.ajax({
      url: 'get_product_specification',
      type: 'post',
      dataType: 'json',
      data:'id='+$(this).val(),
      success:function(data)
      {
        $('#rate_per_unit').val(data.trade_price);
      }
    });

    $('#rate_per_unit').focus();  
});

它的错误原因我忽略了文本字段的ng-model变量我只是在文本字段中没有其他任何东西，因为当我们使用ng-model变量时我们必须关心它的范围。 / p>

正确的方法是。

$("#product_id").on("select2:close",function() {

    $http({
        method: "POST",
        url: 'get_product_specification',
        data:'id='+$(this).val(),
        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
      }).success(function (data) {

       // show the value in textbox
        $('#rate_per_unit').val(data.trade_price);

          //Angular way of assigning value to ng-model variable
         $scope.rate_per_unit = data.trade_price;

      });

    $('#rate_per_unit').focus();  

  });

这里发生了什么我使用angular的范围服务将值附加到ng-model变量，因此我的数学计算开始工作，因为我的rate_per_unit有一些值来计算它。

如果值从头开始存在，则ng-model不会对输入起作用

1 个答案: