Angularjs ui-grid Filtro dal campo di immissione testo

Question

Forse qualcuno può aiutarmi con un piccolo problema. Sono piuttosto nuovo nel campo della programmazione web, ma ho esperienza di programmazione. Mi piacerebbe sviluppare un piccolo sito Web che utilizza angularjs e ui-grid. Sfortunatamente il filtro non funziona da campi di input esterni.

Qualcuno potrebbe dirmi dov'è il mio bug di programmazione?

Il codice può essere trovato qui: 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); 
//   } 
//  }); 

L'idea è quella di avere una barra di navigazione che contiene un campo di ricerca. Più tardi voglio filtrare in base agli elenchi di intervalli su ulteriori colonne. Tuttavia nemmeno il filtraggio delle stringhe standard funziona nel mio esempio.

Domande:

1. Qualcuno potrebbe dirmi dove il mio problema attuale è? Più in particolare: perché il filtro dai campi di input esterni non funziona?
2. L'altra domanda è come è possibile associare i valori minimo e massimo dei cursori di intervallo ad es. la colonna dell'età nel mio esempio? (Direttamente correlato al problema di legame in questione (1))

mi sono guardato intorno per le risposte, ma o si tratta di un problema direttamente del legame che non riesco a capire, problema una mera programmazione js, o un aggiornamento ngGrid al problema della rete ui.

Grazie mille in anticipo

Answer 1

La risposta alla sua prima domanda, non hanno veramente fatto un'opzione di ricerca globale per l'interfaccia utente-Grid ancora, quindi bisogna fare un po 'di lavoro in giro. Il modo corrente in cui funzionano i filtri di colonna è angolare per il cambiamento del campo di input del filtro della colonna e quando si digita nella casella, il filtro viene aggiornato. Pertanto, il filtro non verrà applicato a meno che non imposti questa casella di input per attivare l'evento di modifica. La soluzione alternativa è semplicemente filtrare i dati e ricaricare. Per esempio:

Nella tua casella di ricerca di input HTML, aggiungere un aggiornamento

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

poi nei tuoi app.js

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

Oh, e non dimenticare di includere il filtro $ nella vostra controller

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

Ho biforcato il tuo esempio e l'ho modificato con questa soluzione alternativa. Check it out qui: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

Answer 2

provare questo:

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

per la scatola di input: ng-modello input = "Testo di ricerca" ng-change = "refresh()" segnaposto = "Cerca .. ."

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

Spero che funzioni ...