如何獲取角度數據表中的搜索框值？

Question

我正在使用angular datatable插件 ，我想獲得生成的數據表附帶的搜索框的值。 Angular數據表有一些制作數據表的選項 ，但是它們中的任何一個都允許我指定屬性或我可以觀察的目的來獲取特定值。

由於我需要獲取數據表的輸入搜索的值，我找不到實現目的的方法。

那么，如何在角度數據表中獲取搜索框值？

Answer 1

不幸的是，你不能看$watch搜索詞/過濾器。 Angular dataTables是一些指令，它使jQuery dataTables可以在沒有DOM沖突的情況下以角度運行 ，但內部仍然可以像往常一樣工作 - 以完全無角度的方式:)

但是，每次執行搜索/過濾時，dataTable都會廣播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 “能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

Answer 2

您可以使用search（）函數獲取實際搜索值（不帶參數）。

要更新它，請確保：

有一個dtInstance和一個dtOptions對象：

<table datatable dt-instance="vm.dtInstance" dt-options="vm.dtOptions">

您將回調綁定到dtOptions中的“draw”事件：

this.dtOptions = { drawCallback: this.myCallbackFunction }

然后在你的功能中你可以做到：

this.myCallbackFunction = () => {
   let mySearchValue = this.dtInstance.DataTable.search() 
}