如何在Angular智能表中搜索特殊字符
关于智能表的介绍:
它是一个Angularjs模块,用于以表格格式显示,具有过滤、排序等一系列功能,这在Angular js中以更快的方式编制报告、过滤和搜索数据时非常有用。它是轻量级的、对开发者友好的、强大的、模块化的和可扩展的。
步骤:
- 我们可以通过以下方式开始使用智能表
- bower 安装 angular-smart-table (或)
- npm install angular-smart-table
- 一旦上述脚本被执行,我们就可以使用angular-smart-table了。
语法:
- 将模块
angular.module(‘<nameofyourapp>’, [‘smart-table’]
添加到angular应用程序中。 - 就像下面正常的html表格结构一样,在表格元素上,需要添加 “st-table “属性,以告知smart-table将显示数据的集合,(即使用中继器)。
- 为了在angular-smart-table中搜索一个内容,我们需要使用stSearch指令。它可以是一个以逗号分隔的需要搜索的项目列表。
- stDebounceTime属性(其值为毫秒)可以用来控制搜索时间。有时会进行无用的调用(特别是在连接到服务器的时候),为了克服这个问题,需要使用这个属性。
- 在搜索过程中,输入可以是一个正则表达式模式。有时,为了转义输入中的 regexp 特定字符,我们需要使用 stSearchEscape 属性。
基本的例子和解释:
让我们看看在智能表中搜索的示例代码,以及过滤和分页,见以下代码
我们的样本数据是从 “http://coderszine.com/demo/rest-api/v1/employee/read “中检索出来的。
stSafeSrc 属性:
因为我们已经从restful端点获取了数据(甚至从远程数据库、restful端点、ajax调用等)。
我们需要不失时机地使用这个属性。此外,智能表创建了一个显示集合的副本,由于涉及到异步数据,这个属性是必须的。
这里的 “雇员 “是以异步方式检索的,需要进行渲染,并在st-safe-src中指定。
sort被应用于所有列,因此st-sort被用于排序。
应用分页法,每页有5条记录。
输入 :
通过上述方法,让我们在一个具有搜索、排序和分页功能的智能表中呈现数据。
HTML:
输出:
搜索一个文本后
基于指定的排序。