Angularjs ui-grid Metin giriş alanından filtre

Question

Belki birileri bana küçük bir sorunla yardımcı olabilir. Web programlama alanında oldukça yeniyim, fakat programlama deneyimim var. Angularjs ve ui-grid kullanan küçük bir web sitesi geliştirmek istiyorum. Ne yazık ki filtreleme harici giriş alanlarından çalışmıyor.

Birisi bana programlama hatamın nerede olduğunu söyleyebilir mi?

kod

burada bulunabilir: 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); 
//   } 
//  }); 

fikri arama alanını içeren bir gezinti çubuğu sahip olmaktır. Daha sonra diğer sütunlardaki rangesliderlere bağlı olarak filtrelemek istiyorum. Ancak standart dizge filtreleme bile örneğimde çalışmıyor.

Sorular: benim şimdiki sorunun nerede olduğunu

1. biri bana söyleyebilir misiniz? Daha spesifik olarak: Harici giriş alanlarından filtreleme neden çalışmıyor?
2. Diğer soru, aralık kaydırıcılarının minimum ve maksimum değerlerini ör. örneğimde yaş sütunu mu?

Cevapları etrafına baktı (doğrudan (1) Söz konusu bağlanma sorunu ile ilgili), ancak bu doğrudan ben, sadece programlama js sorunu kavramak olamayacağını bağlayıcı bir sorun ya da bir ngGrid güncelleme ya UI-ızgara problemi. Eğer etrafında bir iş biraz yapmak zorunda

Şimdiden teşekkürler

Answer 1

ilk sorunun cevabı içinde bir sürü, gerçekten, UI-Izgara için küresel bir arama seçeneği yapılmış henüz yok. Sütun filtrelerinin çalışmasının geçerli yolu, bir değişiklik için sütun filtresi girdi alanını açısal olarak izler ve kutuya yazdığınızda filtresini yeniler. Bu nedenle, bu giriş kutusunu değişiklik olayını tetiklemeye zorlamadığınız sürece filtreniz geçerli olmaz. Çözüm, yalnızca verileri filtrelemek ve yeniden yüklemek içindir. Örneğin:

HTML giriş Arama kutusuna

, yenilenmeye senin app.js sonra

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

eklemek

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

oh ve $ filtre eklemek unutma senin kontrolörü

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

Örneğinizi çıkardım ve bu geçici çözümle değiştirdim. Buradan kontrol edin: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

Answer 2

bu deneyin:

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

giriş kutusu için: giriş ng model = "SEARCHTEXT" ng-değişim = tutucu = "Ara "refresh()" .. ."

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

ben çalışır umut ...