Angularjs ui-grid Bộ lọc từ trường nhập văn bản

Question

Có thể ai đó có thể giúp tôi giải quyết một chút. Tôi khá mới trong lĩnh vực lập trình web, nhưng tôi có kinh nghiệm lập trình. Tôi muốn phát triển một trang web nhỏ sử dụng angularjs và ui-grid. Rất tiếc, tính năng lọc không hoạt động từ các trường nhập ngoài.

Ai đó có thể cho tôi biết lỗi lập trình của tôi ở đâu?

Mã này có thể được tìm thấy ở đây: 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); 
//   } 
//  }); 

Ý tưởng là để có một thanh điều hướng có chứa một lĩnh vực tìm kiếm. Sau đó, tôi muốn lọc tùy thuộc vào phạm vi trên các cột khác. Tuy nhiên, ngay cả chuỗi chuẩn cũng không hoạt động trong ví dụ của tôi.

Câu hỏi:

1. ai đó có thể cho tôi biết nơi vấn đề hiện tại của tôi là gì? Cụ thể hơn: Tại sao tính năng lọc từ các trường nhập ngoài không hoạt động?
2. Câu hỏi khác là làm cách nào để tôi có thể ràng buộc các giá trị nhỏ nhất và tối đa của các thanh trượt phạm vi, ví dụ: cột tuổi trong ví dụ của tôi? (liên quan trực tiếp đến vấn đề ràng buộc trong câu hỏi (1))

Tôi xem xét câu trả lời, nhưng đây là vấn đề ràng buộc mà tôi không thể nắm bắt, chỉ là vấn đề lập trình js, hoặc cập nhật ngGrid đến vấn đề ui lưới.

Thanks a lot trước

Answer 1

Câu trả lời cho câu hỏi đầu tiên của bạn, họ vẫn chưa thực sự làm một lựa chọn tìm kiếm toàn cầu cho giao diện người dùng-Lưới, vì vậy bạn phải làm một chút của một công trình xung quanh. Cách hiện tại mà các bộ lọc cột hoạt động là góc cạnh xem trường đầu vào của bộ lọc cột để thay đổi và khi bạn nhập vào hộp, nó sẽ làm mới bộ lọc của nó. Vì vậy, bộ lọc của bạn sẽ không áp dụng trừ khi bạn buộc hộp nhập này kích hoạt sự kiện thay đổi. Cách giải quyết đơn giản là lọc dữ liệu và tải lại. Ví dụ:

Trong hộp tìm kiếm đầu vào HTML của bạn, thêm một refresh

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

sau đó trong app.js bạn

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

oh, và đừng quên để bao gồm $ lọc trong của bạn bộ điều khiển

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

Tôi chia nhỏ ví dụ của bạn và sửa đổi nó bằng cách này. Kiểm tra nó ra ở đây: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

Answer 2

thử điều này:

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

cho hộp đầu vào: đầu vào ng mô hình = "searchText" ng-change = "refresh()" placeholder = "Tìm kiếm .. . "

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

Tôi hy vọng nó hoạt động ...