Angularjs ui-grid Filter vom Texteingabefeld

Question

Vielleicht kann mir jemand mit einem kleinen Problem helfen. Ich bin ziemlich neu auf dem Gebiet der Webprogrammierung, aber ich habe Programmiererfahrung. Ich möchte eine kleine Website entwickeln, die angularjs und ui-grid verwendet. Leider funktioniert die Filterung nicht von externen Eingabefeldern.

Könnte mir bitte jemand sagen, wo mein Programmierfehler ist? 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); 
//   } 
//  }); 

Die Idee ist, eine Navigationsleiste zu haben, die ein Suchfeld enthält:

Der Code kann hier gefunden werden. Später möchte ich abhängig von Rangsidern auf weitere Spalten filtern. In meinem Beispiel funktioniert jedoch nicht einmal die Standard-String-Filterung.

Fragen:

1. Könnte mir jemand sagen, wo mein aktuelles Problem ist? Genauer gesagt: Warum funktioniert die Filterung von externen Eingabefeldern nicht?
2. Die andere Frage ist, wie binde ich min und max Werte von Bereich Schieberegler zu z. die Alterspalte in meinem Beispiel? (Direkt an das Bindungsproblem in Frage bezogen (1))

ich nach Antworten umsah, aber entweder das ist direkt ein Problem der Bindung, die ich nicht verstehen kann, ist eine bloße Programmierung js Problem oder eine ngGrid Update zu UI-Grid-Problem.

Vielen Dank im Voraus

Answer 1

Die Antwort auf Ihre erste Frage, haben sie nicht gemacht wirklich eine globale Suche Option für den UI-Grid noch, so dass Sie um ein bisschen einer Arbeit zu tun haben. Der augenblickliche Weg, auf dem die Spaltenfilter funktionieren, ist das angulare Überwachen des Eingabefelds des Spaltenfilters für eine Änderung, und wenn Sie das Feld eingeben, wird der Filter aktualisiert. Daher wird Ihr Filter nicht angewendet, es sei denn, Sie erzwingen, dass dieses Eingabefeld das Änderungsereignis auslöst. Die Problemumgehung besteht darin, die Daten einfach zu filtern und erneut zu laden. Zum Beispiel:

In Ihrem HTML-Eingabesuchfeld, fügen Sie ein Refresh

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

dann in Ihrem app.js

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

oh, und vergessen Sie nicht, $ Filter enthalten in Ihrem

Controller

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

ich gegabelt Ihr Beispiel und modifiziert es mit dieser Problemumgehung. Check it out hier: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

Answer 2

try this:

$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'} 
      ] 
}; 

für Eingabefeld: Eingang ng-Modell = "search" ng-change = "refresh()" Platzhalter = "Suche .. „.

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

ich hoffe, es funktioniert ...