Angularjs ui-grid Filtr z pola wprowadzania tekstu

Question

Może ktoś może mi pomóc z małym problemem. Jestem całkiem nowy w dziedzinie programowania stron internetowych, ale mam doświadczenie w programowaniu. Chciałbym stworzyć małą stronę internetową, która używa angularjs i ui-grid. Niestety filtrowanie nie działa z zewnętrznych pól wejściowych.

Czy ktoś mógłby mi powiedzieć, gdzie jest mój błąd programistyczny?

Kod można znaleźć tutaj: 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); 
//   } 
//  }); 

Chodzi o to, aby mieć pasek nawigacyjny, który zawiera pole wyszukiwania. Później chcę filtrować w zależności od odległości w kolejnych kolumnach. Jednak w moim przykładzie nie działa nawet standardowe filtrowanie ciągów znaków.

Pytania:

1. Czy ktoś mógłby mi powiedzieć, gdzie jest mój aktualny problem? Dokładniej: Dlaczego filtrowanie z zewnętrznych pól wejściowych nie działa?
2. Drugie pytanie brzmi: jak powiązać wartości min. I maks. Suwaków zasięgu z np. kolumna wieku w moim przykładzie? (bezpośrednio związane z wiążącym problemem, o którym mowa (1))

Rozejrzałem się za odpowiedziami, ale albo jest to bezpośrednio problem wiązania, którego nie mogę pojąć, zwykłego problemu programistycznego, albo aktualizacji ngGrid do problemu z siecią ui-grid.

dziękuję z góry

Answer 1

Odpowiedź na pierwsze pytanie, oni naprawdę nie popełnił globalną opcję wyszukiwania dla UI-Grid jeszcze, więc trzeba zrobić trochę pracy wokół. Obecny sposób działania filtrów kolumnowych polega na obserwacji pola wprowadzania filtru kolumny w celu zmiany, a po wpisaniu w polu odświeża on filtr. Tak więc filtr nie zostanie zastosowany, chyba że wymusisz to pole wejściowe, aby wywołać zdarzenie zmiany. Obejście polega na prostym filtrowaniu danych i ponownym ładowaniu. Na przykład:

w HTML polu wyszukiwania wejściowe, dodać odświeżenia

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

następnie w swoim app.js

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

Aha, i nie zapomnij podać $ filtr w kontroler

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

Rozwinąłem Twój przykład i zmodyfikowałem go tym obejściem. Sprawdź tutaj: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

Answer 2

spróbuj tego:

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

na polu tekstowym: wejście ng model = "searchText" ng-change = "refresh()" placeholder = "Szukaj .. .”

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

mam nadzieję, że to działa ...