Jquery ajax自动完成填充多个字段后不读取输入更改
我使用jqueryautocomplete和ajax自动填写3个输入字段，即产品代码、描述和价格。还有两个字段“数量”和“总计”使用角度 我的问题是，这两个角度字段不知道用户何时使用了自动完成。当您更改数量时，除非您手动更改价格，否则无法读取价格输入 我已经查看了$watch、$apply、ng change，但一次又一次地无法从auto complete中看到我的范围外变量 在这里的Plunker中查看它 注意：在“代码”输入中搜索以01开头的产品代码 这是我的密码Jquery ajax自动完成填充多个字段后不读取输入更改,jquery,angularjs,Jquery,Angularjs,我使用jqueryautocomplete和ajax自动填写3个输入字段，即产品代码、描述和价格。还有两个字段“数量”和“总计”使用角度 我的问题是，这两个角度字段不知道用户何时使用了自动完成。当您更改数量时，除非您手动更改价格，否则无法读取价格输入 我已经查看了$watch、$apply、ng change，但一次又一次地无法从auto complete中看到我的范围外变量 在这里的Plunker中查看它 注意：在“代码”输入中搜索以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>
jQuery（文档）.ready（函数（）{
$（'.code1'）。自动完成({
资料来源：[{
“价值”：“01-A”，
“prod_desc1”：“超大大象”，
“价格1”：“20.00”，
“产品代码1”：“01-A”，
“图像1”：”
}, {
“价值”：“01-A-BE”，
“prod_desc1”：“超大象形书头（对）”，
“价格1”：“20.00”，
“产品代码1”：“01-A-BE”，
“图像1”：”
}, {
“价值”：“01-A-Q”，
“产品说明1”：“超大Ele全彩”，
“价格1”：“20.00”，
“产品代码1”：“01-A-Q”，
“图像1”：”
}, {
“值”：“01-B”，
“prod_desc1”：“大型大象”，
“价格1”：“20.00”，
“产品代码1”：“01-B”，
“图像1”：”
}, {
“值”：“01-B-CH”，
“产品说明1”：“大型电子烛台”，
“价格1”：“20.00”，
“产品代码1”：“01-B-CH”，
“图像1”：”
}, {
“值”：“01-B-PL”，
“产品说明1”：“大型电动阀杆板”，
“价格1”：“20.00”，
“产品代码1”：“01-B-PL”，
“图像1”：”
}, {
“值”：“01-BA”，
“prod_desc1”：“XL Ben Elephant”，
“价格1”：“20.00”，
“产品代码1”：“01-BA”，
“图像1”：”
}, {
“值”：“01-BB”，
“产品描述1”：“设计师大象”，
“价格1”：“20.00”，
“产品代码1”：“01-BB”，
“图像1”：”
}, {
“值”：“01-BC”，
“prod_desc1”：“中等大小的大象”，
“价格1”：“20.00”，
“产品代码1”：“01-BC”，
“图像1”：”
}, {
“值”：“01-BD”，
“产品描述1”：“设计师大象”，
“价格1”：“20.00”，
“产品代码1”：“01-BD”，
“图像1”：”
}],
最小长度：2，
选择：功能（evt、ui）{
//选择产品代码后，填充此表单中的相关字段
this.form.prod_desc1.value=ui.item.prod_desc1；
this.form.price1.value=ui.item.price1；
$（“#image1”）.html（ui.item.image1）；
}
});
});
/*设置自动完成响应的样式*/
li.ui-菜单项{
字体大小：12px！重要；
}
订单
形象
代码
描述
价格
数量
全部的
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'OrderController'，函数（$scope）{
函数更改（）{
警报（“a”）；
var scope=angular.element（$（“#price1”））.scope（）；
作用域$apply（函数（）{
scope.price1=范围；
});
}
});
function jqueryAutoCompleteHandler(){
// other stuff
var angularElement=angular.element(element);
var scope = angularElement.scope();
var parser = angularElement.injector().get('$parse');
var getter = parser(angularElement.attr('ng-model'));
var setter = getter.assign;
setter(scope, value)
scope.$apply();
}