📜  如何在角度智能表中搜索特殊字符?

📅  最后修改于: 2021-05-13 19:53:19             🧑  作者: Mango

智能表简介:

它是一个Angularjs模块,用于以表格格式显示,并具有一系列功能,例如过滤,排序等。这对于在报告准备,以Angular js更快地过滤和搜索数据的过程中非常有帮助。它是轻量级的,对开发人员友好的,健壮的,模块化的和可扩展的

方法:

  • 我们可以通过以下方式开始使用智能表
  • 凉亭安装角度智能表(或)
  • npm安装angular-smart-table
  • 一旦执行了以上脚本,就可以使用angular-smart-table进行设置了

句法:

  1. 将模块angular.module('’,[‘smart-table’]添加到angular应用程序中。
  2. 就像遵循普通的html表结构一样,在table元素上,需要添加“ st-table ”属性以向智能表通知将显示数据的集合(即,使用转发器)
  3. 为了在angular-smart-table中搜索内容,我们需要使用stSearch指令。它可以是需要搜索的搜索项目的逗号分隔列表
  4. 可以使用stDebounceTime属性(该值以毫秒为单位)以控制搜索时间。有时会进行无用的调用(特别是连接到服务器时),并且为了克服这个问题,需要使用此属性。
  5. 在搜索过程中,输入可以是正则表达式模式。有时,为了在输入中转义正则表达式中的特定字符,我们需要使用stSearchEscape属性。

基本示例和说明:

让我们看一下在智能表中搜索的示例代码,以及在下面的代码中看到的过滤和分页

从“ http://coderszine.com/demo/rest-api/v1/employee/read”中检索数据作为示例

stSafeSrc属性:

当我们从安全性端点(甚至从远程数据库,安全性端点,ajax调用等)获取数据时
我们需要不遗余力地使用此属性。此外,智能表会创建显示集合的副本,并且由于涉及异步数据,因此必须具有此属性。

在这里,“雇员”以异步方式获取并需要呈现,并在st-safe-src中指定

sort适用于所有列,因此给出了st-sort进行排序。

分页应用于每页5条记录。

输入 :

通过上述方法,让我们在具有搜索,排序和分页功能的智能表中呈现数据

SampleApp = angular.module(
'SampleApp', ['SampleApp.controllers', 'smart-table']);    
  
angular.module('SampleApp.controllers', []).controller(
'sampleController',
['$scope', '$http', function($scope, $http) 
{
    $scope.loading = false;
    $scope.getData = function() {
        $scope.loading = true;
        $http.get(
"http://coderszine.com/demo/rest-api/v1/employee/read")
        .then(function(response){
            $scope.employees = response.data;
            $scope.loading = false;
        });
    }
    $scope.getData();
}]);

HTML:



    
        
        
        
        
        
        
        
    
    
        
        
            

Angular Smart Table Example with               Pagination, Search and Sorting in                a simpler way

            

Loading the data...

          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
                                                     
Employee NameGenderEmployee AgeSkills                           Employee Designation
{{employee.name}}{{employee.gender}}{{employee.age}}{{employee.skills}}{{employee.designation}}
                            
                        
        
    

输出:

搜索文字后

根据名称排序