最近在使用angularjs开发页面功能的时候有使用到angucomplete-alt插件,
在此简单写下它的用法:
1)从git上下载它到本地plugins目录;
2)在jsp页面中引入angucomplete-alt.js文件;
3)在声明app的时候将'angucomplete-alt'加入到module中
var homePageApp = angular.module('homePageApp',['ui.router','pager','ngDialog','daterangepicker','ngMessages','angucomplete-alt']);
4)在html文件中加入内容,因为我需要输入内容到后台去做查询因此需要在remote-url中指定后台get请求的地址(似乎只能用get),备注:这块使用的相对路径,因为我发现在程序里头用绝对路径是报错的。
<angucomplete-alt id="appName"
pause="300"
placeholder="服务名称"
selected-object="selectedAppName"
title-field="appName"
ng-model="appName"
input-name="appName"
minlength="1"
remote-url="../../services/selectAppIdAndAppName?appName="
remote-url-request-formatter="remoteUrlRequestFn"
input-class="form-control"
match-class="highlight" />
/*
* @Title: selectAppIdAndAppName
* @Description: TODO(这里用一句话描述这个方法的作用)
* @param @return 参数
* @return Respond 返回类型
* @throws
*/
@RequestMapping(value = "/selectAppIdAndAppName",method = RequestMethod.GET)
public @ResponseBody Respond selectAppIdAndAppName(@RequestParam String appName) {
Respond resp = new Respond();
resp = servicesService.selectAppIdAndAppName(appName);
return resp;
}
我这里先根据remote-url 以及输入的内容做了一次模糊匹配来查出相关列表,然后再选中某一项的时候调用selected-object中对应的方法selectedAppName
以上是我对这个插件的使用情况。。。。欢迎补充,具体属性以及使用方法,请参考git
备注:
其实我再使用的过程中,修改数据的时候回显值直接用ng-model不会显示出来,查了好久后来从官方的example中找到了
在此附上代码
// selectedAppName 对应selected-object,appName为对应的title-field
$scope.selectedAppName = {appName:'hello'};
<div angucomplete-alt id="appName"
pause="300"
placeholder="服务名称"
selected-object="selectedAppName"
initial-value="selectedAppName"
title-field="appName"
ng-model="appName"
input-name="appName"
minlength="1"
remote-url="../../services/selectAppIdAndAppName?appName=" remote-url-request-formatter="remoteUrlRequestFn" input-class="form-control" match-class="highlight" ></div>