标签:message 配置 com web service for multi targe plugin
自动完成还是原来的 bassistance.de 好用,详细用法参考官网。
angular的js paths配置及依赖关系不多说;
‘jquery‘: ‘static/jquery-1.11.3/jquery.min‘, ‘jqueryMig‘: ‘static/jquery-migrate-1.4.1.min‘, ‘autocomplete‘: ‘static/jquery-autocomplete/jquery.autocomplete‘,
‘autocomplete‘:{deps:[‘jquery‘,‘jqueryMig‘]
angular页面:
<div class="form-row"> <label class="label">用户编号</label> <input type="text" class="form-control" id="idUsrNo" placeholder="输入编号检索"> <span>{{data.Code}}</span> </div>
页面全部加载后,触发ready事件:
<div ng-repeat="x in [0]" ng-ready=""></div>
前端angular页面全部load后绑定autocomplete组件:
$scope.$on(‘ready‘, function () { // $(‘#ui-role‘).selectpicker(); $(‘#idUsrNo‘).autocomplete(‘/Service1.svc/getsup‘, { minChars: 0, width: 233,// 下拉提示框的宽度 multiple: false,// 多选 matchContains: true, autoFill: false, parse: function(data) {// 数据先经过这里数据转换,再格式化formatItem return $.map(eval(data), function(row) { return { data: row,// 传递原始数据 value: row.code + row.label,// 文本框输入的内容于value内容进行匹配过滤 result: row.label// 选择回车后文本框内显示的内容 } }); }, formatItem: function(row, i, max) { return row.code + " [" + row.label + "]";// 下拉提示框内显示的内容 } }).result(function(event, data){ $scope.data.Code = data.code; $scope.$apply();// 用$apply来强制刷新数据 console.log(data);// 回车后选中的记录 }); });
后台接口是wcf:q是文本框输入的查询条件
[OperationContract] [WebGet(ResponseFormat = WebMessageFormat.Json)] List<m_supplier> GetSup(string q);
enginx代理转发配置:不区分大小写
location ~* /Service1.svc/ { proxy_pass http://localhost:1735; }
效果:
标签:message 配置 com web service for multi targe plugin
原文地址:https://www.cnblogs.com/jonney-wang/p/9720908.html