在ajax自动完成填充多个字段后,Angular不读取输入更改

时间:2015-09-16 05:57:53

标签: jquery angularjs

我正在使用jquery自动完成ajax来自动填写3个输入字段,即产品代码,描述和价格。还有两个字段,Quantity和total使用angular。

我的问题是两个角度字段不知道用户何时使用了自动完成。当您更改数量时,在您手动更改价格之前,它无法读取价格输入。

我看过$ watch,$ apply,ng-change,但是一次又一次,Angular无法从自动完成中看到我超出范围的变量。

在Plunker中查看http://run.plnkr.co/plunks/8g88JUPDjUfvCWupxKyT/ 注意:在" Code"中搜索以01开头的产品代码。输入

这是我的代码

            <!DOCTYPE html>
            <html>

            <head>
              <link data-require="jquery-ui@1.8.16" data-semver="1.8.16" rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css" />
              <script data-require="jquery@1.4.2" data-semver="1.4.2" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
              <script data-require="jquery-ui@1.8.16" data-semver="1.8.16" src="http://code.jquery.com/ui/1.8.16/jquery-ui.js"></script>
              <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
              <link rel="stylesheet" href="style.css" />
              <script src="script.js"></script>
            </head>

            <body>
              <script type="text/javascript">
                jQuery(document).ready(function() {
                  $('.code1').autocomplete({
                    source: [{
                      "value": "01-A",
                      "prod_desc1": "Extra Large Elephant",
                      "price1": "20.00",
                      "prod_code1": "01-A",
                      "image1": ""
                    }, {
                      "value": "01-A-BE",
                      "prod_desc1": "Extra Large Elephant Bookends (pair)",
                      "price1": "20.00",
                      "prod_code1": "01-A-BE",
                      "image1": ""
                    }, {
                      "value": "01-A-Q",
                      "prod_desc1": "Extra Large Ele full colour",
                      "price1": "20.00",
                      "prod_code1": "01-A-Q",
                      "image1": ""
                    }, {
                      "value": "01-B",
                      "prod_desc1": "Large Elephant",
                      "price1": "20.00",
                      "prod_code1": "01-B",
                      "image1": ""
                    }, {
                      "value": "01-B-CH",
                      "prod_desc1": "Large Ele - Candle holder",
                      "price1": "20.00",
                      "prod_code1": "01-B-CH",
                      "image1": ""
                    }, {
                      "value": "01-B-PL",
                      "prod_desc1": "Large Ele Stem Plate",
                      "price1": "20.00",
                      "prod_code1": "01-B-PL",
                      "image1": ""
                    }, {
                      "value": "01-BA",
                      "prod_desc1": "XL-Ben Elephant",
                      "price1": "20.00",
                      "prod_code1": "01-BA",
                      "image1": ""
                    }, {
                      "value": "01-BB",
                      "prod_desc1": "DESIGNER ELEPHANT",
                      "price1": "20.00",
                      "prod_code1": "01-BB",
                      "image1": ""
                    }, {
                      "value": "01-BC",
                      "prod_desc1": "Medium-ben's-elephant",
                      "price1": "20.00",
                      "prod_code1": "01-BC",
                      "image1": ""
                    }, {
                      "value": "01-BD",
                      "prod_desc1": "DESIGNER ELEPHANT",
                      "price1": "20.00",
                      "prod_code1": "01-BD",
                      "image1": ""
                    }],
                    minLength: 2,
                    select: function(evt, ui) {
                      // when a product code is selected, populate related fields in this form
                      this.form.prod_desc1.value = ui.item.prod_desc1;
                      this.form.price1.value = ui.item.price1;
                      $("#image1").html(ui.item.image1);




                    }
                  });
                });
              </script>
              <style type="text/css">
                /* style the auto-complete response */

                li.ui-menu-item {
                  font-size: 12px !important;
                }
              </style>
              <div ng-app="myApp" ng-controller="OrderController" class="row">
                <div class="page-header">
                  <h1>Order Form</h1>
                  <form onsubmit="return false;">
                    <table>
                      <thead>
                        <tr>
                          <th>Image</th>
                          <th>Code</th>
                          <th>Desc</th>
                          <th>Price</th>
                          <th>Qty</th>
                          <th>Total</th>
                        </tr> 
                      </thead>
                      <tbody>
                        <tr>
                          <td>
                            <div class="order-image">
                              <span id="image1"></span>
                            </div>
                          </td>
                          <td>
                            <input id="code1" type="text" class="code1 order-code" />
                          </td>
                          <td>
                            <input class="order-prod_desc" id="prod_desc1" type="text" />
                          </td>
                          <td>
                            <input ng-model="price1" ng-change="change()" class="order-price" id="price1" name="price1" type="number" />
                          </td>
                          <td>
                            <input ng-model="quantity1" class="order-price" id="quantity1" type="number" value="" />
                          </td>
                          <td>
                            <input class="order-price" id="total1" type="number" value="{{price1 * quantity1}}" step="0.01" />
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </form>
                </div>
              </div>
              <script>
                var myApp = angular.module('myApp', []);



                myApp.controller('OrderController', function($scope) {

                  function change() {
                    alert("a");
                    var scope = angular.element($("#price1")).scope();
                    scope.$apply(function() {
                      scope.price1 = scope;
                    });
                  }

                });
              </script>
              <script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
              <script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
            </body>

            </html>

1 个答案:

答案 0 :(得分:2)

问题是您需要访问字段的模型而不是自己的字段,您需要获取输入字段模型的句柄,修改它然后应用这些更改如何做到这一点?其实很简单

OBJECT_ID(N'TEMPDB..#t1')

这样的事情应该有效。可能需要很少的变化和拼写检查。但这就是一般的想法。 检查这个plunker http://plnkr.co/edit/XB7t3sePl3QbkopOoR3U?p=preview