如何获取角度数据表中的搜索框值？

Question

我正在使用angular datatable plugin，并且想要获取所生成的datatable附带的搜索框的值。Angular数据表有一些创建数据表的选项，但它们中的任何一个都允许我指定属性或为获得特定值而可以观察的内容。

由于我需要获取数据表的输入搜索的值，因此无法找到实现目标的方法。

那么，如何获取角度数据表中的搜索框值？

Answer 1

不幸的是，您无法$watch搜索词/过滤器。Angular dataTables是使jQuery dataTables 可按角度运行而没有DOM冲突等的指令，但是内部结构仍然像往常一样工作-以完全无角度的方式:)

但是，每次执行搜索/过滤器时，dataTables都会广播search（.dt）事件，然后您可以直接从DOM中提取搜索的值：

angular.element('body').on('search.dt', function() {  
   var searchTerm = document.querySelector('.dataTables_filter input').value;
   console.log('dataTables search : ' + searchTerm); 
})

当然，这是最简单的类似jQuery的方法。您可能在页面上有多个dataTable，并希望为每次搜索提取更多详细信息，然后可以在角度应用中使用：

angular.element('body').on('search.dt', function(e, api) {  
   if (!$scope.$$phase) { 
      $scope.$apply(function() {
         $scope.searchTerm = api.oPreviousSearch;
         $scope.searchTerm.table = e.target.id;
      })   
   }  
})

$apply为了$scope从事件处理程序内部进行更新。oPreviousSearch实际上是当前搜索，因此上面的代码在表格上产生了$watch“ able searchTerm”

{
  "bCaseInsensitive": true,
  "sSearch": "test",
  "bRegex": false,
  "bSmart": true,
  "_hungarianMap": {
    "caseInsensitive": "bCaseInsensitive",
    "search": "sSearch",
    "regex": "bRegex",
    "smart": "bSmart"
  },
  "table": "tableId"
}

参见演示-> http://plnkr.co/edit/E5Tr7FrLRIVTtguQHFx9?p=preview