Angularjs ui-grid從文本輸入框中過濾

也許有人可以幫我解決一些小問題。我在網絡編程領域非常新，但我有編程經驗。我想開發一個使用angularjs和ui-grid的小型網站。不幸的是，過濾不能從外部輸入字段中工作。Angularjs ui-grid從文本輸入框中過濾

有人請告訴我我的編程錯誤是在哪裏嗎？

的代碼可以在這裏找到：http://plnkr.co/edit/fiA666OzpBqpTrCiuXER?p=preview

var myDummyData = [{name: "Moroni", age: 50}, 
     {name: "Tiancum", age: 43}, 
     {name: "Jacob", age: 27}, 
     {name: "Nephi", age: 29}, 
     {name: "Enos", age: 34}]; 
    var myDummyData2 = [{name: "aTest", age: 50}, 
     {name: "bTest1", age: 43}, 
     {name: "cTest2", age: 27}, 
     {name: "dTest3", age: 29}, 
     {name: "eTest4", age: 34}]; 

    $scope.filterOptions = { 
     filterText: '' 
    }; 

    $scope.gridOpts = { 
     data: myDummyData, 
     enableFiltering: true, 
     columnDefs: [ 
        {name: 'Name', field: 'name', enableFiltering: true 
         , filter: { 
          term: $scope.filterOptions.filterText //DOES NOT WORK... BUT WHY 
         } 
        }, 
        {name: 'Price', field: 'age'} 
       ] 
    }; 


    $scope.updateData = function(newValue){ 
     //console.log($scope.gridOpts.data); 

     console.log($scope.gridOpts.columnDefs[0].filter); 
     $scope.gridOpts.columnDefs[0].filter = {term: newValue}; 
     console.log("Scope nameid set " + $scope.gridOpts.columnDefs[0].filter.term); //is set but no update 
     //$scope.$apply(); //not possible gives error! WHY?? 


     //$scope.gridOpts.data = myDummyData; //for testing works 
    }; 


    $scope.swapData = function() { 
     if ($scope.gridOpts.data === myDummyData) { 
      $scope.gridOpts.data = myDummyData2; 
     } 
     else { 
      $scope.gridOpts.data = myDummyData; 
     } 
    }; 

    //DOES NOT WORK BUT WHY 
//  $scope.$watch('filterOptions.filterText', function (newValue, oldValue) { 
//   if ($scope.filterOptions.filterText) { 
//    $scope.filteringText = newValue; 
//    $scope.updateData(newValue); 
//   } 
//  });

的想法是有一個包含搜索欄導航欄。稍後我想根據更多列上的距離滑輪進行過濾。然而，即使我的例子中沒有標準的字符串過濾。

問題：

有人能告訴我在哪裏，我現在的問題是什麼？更具體地說：爲什麼從外部輸入字段的過濾不起作用？
另一個問題是如何將範圍滑塊的最小值和最大值綁定到例如我的例子中的年齡列？（直接關係到有問題的結合問題（1））

我環顧四周的答案，但無論這是直接綁定的問題，我不能把握的，只有編程JS問題，或ngGrid更新以ui網格的問題。

感謝很多提前

來源

2014-10-07 cojack20

我發現這顯然是一個用戶界面問題。或者我對它的解釋。 – cojack20 2014-10-08 08:33:29

回答你的第一個問題，他們並沒有真正做了UI網格進行全局搜索選項呢，所以你必須做一些工作的周圍。當前列過濾器工作的方式是角度監視列過濾器輸入字段以進行更改，並且當您在該框中鍵入時，它將刷新其過濾器。因此，除非您強制此輸入框觸發更改事件，否則您的過濾器將不適用。解決方法是簡單地過濾數據並重新加載。例如：

在HTML輸入搜索框，添加一個刷新

<input ng-model="searchText" ng-change="refreshData()" placeholder="Search...">

然後在app.js

$scope.refreshData = function() { 
    $scope.myGrid.data = $filter('filter')($scope.data, $scope.searchText); 
};

哦，不要忘了包括$過濾器在您的控制器

app.controller('myController', function($scope, $filter) {}

我分叉您的示例並使用此解決方法對其進行了修改。看看這裏： http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

來源

2015-02-13 22:03:47 Dannzzor

好的答案。是否有可能使其專欄專用？就像我有2個輸入搜索框一個搜索名稱和另一個搜索價格。 – 2015-09-06 15:11:00

因爲我對ui-grid很陌生，我不確定哪個更「適當」（並且不太可能混淆內置的東西），但是我通過在每行上設置一個「可見」標誌來處理這個問題如果它與任何列中的搜索不匹配，則爲false。用戶網格似乎尊重國旗。只是想提出一個替代解決方案 – thynctank 2015-09-14 15:31:20

我有一個問題。如果我試圖獲取已經存在的過濾器的文本，那麼如何？我想要捕獲當前過濾器中的輸入文本，而不是創建新的過濾器。 – JEuvin 2016-01-29 17:33:54

試試這個：

$scope.gridOpts = { 
    data: myDummyData, 
    enableFiltering: true, 
    columnDefs: [ 
       {name: 'Name', field: 'name', enableFiltering: true 
        , filter: { 
         noTerm: true, 
         condition: function(searchTerm, cellValue) { 
          return (cellValue+"" === $scope.filterOptions.filterText+""); 
         } 
        } 
       }, 
       {name: 'Price', field: 'age'} 
      ] 
};

輸入框：輸入NG-模型= 「SEARCHTEXT」 NG-變化= 「刷新（）」佔位符=「搜索.. 」

$scope.refresh = function() 
{ 
    $scope.gridApi.core.refresh(); 
}

我希望它的工作原理...

來源

2015-06-09 06:20:59 Tairman

gridApi.core.refresh（）是對我的幫助。謝謝！ – TwitchBronBron 2017-05-30 12:27:14

Angularjs ui-grid從文本輸入框中過濾

回答

相關問題