javascript - 如何获取 Angular 数据表中的搜索框值？

Question

我正在使用 angular datatable plugin ，我想获取生成的数据表附带的搜索框的值。 Angular 数据表有几个 options制作数据表，但它们中的任何一个都允许我指定属性或我可以为了获得特定值而观察的东西。

由于我需要获取数据表的输入搜索的值，所以我找不到方法来完成我的目的。

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

Answer 1

不幸的是，您不能$watch 搜索词/过滤器。 Angular dataTables 是使 jQuery dataTables runnable 在 Angular 上没有 DOM 冲突等的指令，但内部仍然一如既往地工作 - 以完全非 Angular 方式:)

然而，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 方法。您可能在页面上有多个数据表，并希望为每次搜索提取更详细的信息，然后您可以在您的 Angular 应用程序中使用:

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