文档章节

Angularjs 的搜索输入框插件angucomplete-alt使用

_liucui_
 _liucui_
发布于 2017/03/16 16:36
字数 436
阅读 703
收藏 0

最近在使用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>

 

© 著作权归作者所有

共有 人打赏支持
_liucui_
粉丝 17
博文 137
码字总数 54045
作品 0
秦皇岛
私信 提问
AngularJS 的表单验证

今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:AngularJS的方式). 不过不用担心,那篇文章不一定要...

oschina
2014/06/22
67.4K
7
如何优雅的使用 Angular 表单验证

随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模块中使用最新的 An...

why520crazy
01/15
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
2018/08/05
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13

没有更多内容

加载失败,请刷新页面

加载更多

容器服务

简介 容器服务提供高性能可伸缩的容器应用管理服务,支持用 Docker 和 Kubernetes 进行容器化应用的生命周期管理,提供多种应用发布方式和持续交付能力并支持微服务架构。 产品架构 容器服务...

狼王黄师傅
昨天
2
0
高性能应用缓存设计方案

为什么 不管是刻意或者偶尔看其他大神或者大师在讨论高性能架构时,自己都是认真的去看缓存是怎么用呢?认认真真的看完发现缓存这一块他们说的都是一个WebApp或者服务的缓存结构或者缓存实现...

呼呼南风
昨天
12
0
寻找一种易于理解的一致性算法(扩展版)

摘要 Raft 是一种为了管理复制日志的一致性算法。它提供了和 Paxos 算法相同的功能和性能,但是它的算法结构和 Paxos 不同,使得 Raft 算法更加容易理解并且更容易构建实际的系统。为了提升可...

Tiny熊
昨天
2
0
聊聊GarbageCollectionNotificationInfo

序 本文主要研究一下GarbageCollectionNotificationInfo CompositeData java.management/javax/management/openmbean/CompositeData.java public interface CompositeData { public Co......

go4it
昨天
3
0
阿里云ECS的1M带宽理解

本文就给大家科普下阿里云ECS的固定1M带宽的含义。 “下行带宽”和“上行带宽” 为了更好的理解,需要先给大家解释个词“下行带宽”和“上行带宽”: 下行带宽:粗略的解释就是下载数据的最大...

echojson
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部