ngGrid 다중 열 필터링

AngularJS에 ngGrid 모듈을 사용하여 일부 페이징 된 데이터를 표시하고 있습니다. 그러나 OR 검색을 사용하여 여러 열을 검색 할 수 있기를 원합니다.ngGrid 다중 열 필터링

내가 ID, 이름, 설명과 같은 제목이있는 열이 있다고 가정 해 보겠습니다. 검색 할 때 ID 또는 이름 또는 설명에 검색어가 포함 된 모든 행을 반환하고 싶습니다.

$scope.filterUpdated = function() { 
    $scope.gridOptions.filterOptions.filterText = 'id:' + $scope.filterText + ';name:' + $scope.filterText + ';description:' + $scope.filterText; 
};

그러나 이것이 할 것 같다

$scope.pagingOptions = { 
     pageSizes: [20, 50, 100], 
     pageSize: 20, 
     totalServerItems: 0, 
     currentPage: 1 
    }; 

    $scope.gridOptions = 
     { 
      data: 'myData', 
      columnDefs: [ 
       { field: 'id', displayName: 'Id' }, 
       { field: 'name', displayName: 'Name' }, 
       { field: 'description', displayName: 'Description' }, 
       { displayName: 'Actions', cellTemplate: '<input type="button" data-ng-click="doSomething(row.entity)" value="Do Something" />'}], 
      enablePaging: true, 
      showFooter: true, 
      showFilter: true, 
      pagingOptions: $scope.pagingOptions, 
      filterOptions: { 
       filterText: "", 
       useExternalFilter: false 
      } 
     };

나는 같은 사용자 정의 필터를 정의하기 위해 $ scope.filterText에 바인딩 외부 입력 상자를 사용하여도 기본 검색 상자를 사용하고 시도 그리고 모든 열에. ngGrid 모듈을 사용하여 원하는 것을 얻을 수 있습니까? 사전에

감사합니다,

크리스

출처

2013-05-30 Chris Haines

저는 AngularJS에 새로 왔지만 johnlindquist/eggheadio/www.egghead.io의 모든 비디오를 보았습니다.이 [ngfilter] (http://www.egghead.io/video/bLohP9mh8ks) 비디오가 문제. 그는 3:00 경 다른 검색 필터를 어떻게 사용할 수 있는지 설명하기 시작합니다. 모든 열에서 검색을 시작한 다음 특정 열로 이동합니다. – Pixic

이 토론이 도움이 될 수 있습니다. [열당 노드 그리드 필터] (https://groups.google.com/forum/#!topic/angular/aC24cVln4Vw) – darwinbaisa

예 그리드 구성 내에서 내부 필터링 옵션을 사용하여 열을 통한 필터링을 구현할 수 있습니다 . 내가 대답을 – orif

예 그것이 OR 필터를 수행하는 것이 가능하지만, 그들의 filterOptions.filterText 사용하여 수행 할 수있는 방법을 내가 볼 수없는 NG 그리드 소스 코드에서 검색 후. 그것은 AND 필터링 만 할 수 있습니다.

솔루션은 나는 또한 그것의 어떤 예를 찾을 수 없습니다 filterOptions.useExternalFilter:true

사용 후 것이지만, 조금 그 주위에 재생 후, 나는 필터가 실제로 gridOptions.data를 다시 작성하여 수행한다는 개념을 가지고 객체 배열. 이 필터의 단점은입니다.

Plunker code is here이

가 그래서 기본적으로 코드가이 index.html을과 같을 것이다

<body ng-controller="MyCtrl"> 
    <strong>Filter Name:</strong> </string><input type="text" ng-model="filterName"/> 
    </br> 
    OR 
    </br> 
    <strong>Filter Age:</strong> </string><input type="text" ng-model="filterAge"/> 
    </br> 
    <button ng-click="activateFilter()">Run Filter</button> 
    <br/> 
    <br/> 
    <div class="gridStyle" ng-grid="gridOptions"></div> 
</body>

그리고 당신의 controller.js에서 :

app.controller('MyCtrl', function($scope) { 

$scope.filterOptions = { 
    filterText: '', 
    useExternalFilter: true 
}; 

$scope.activateFilter = function() { 
    var name = $scope.filterName || null; 
    var age = ($scope.filterAge) ? $scope.filterAge.toString() : null; 
    if (!name && !age) name=''; 

    $scope.myData = angular.copy($scope.originalDataSet, []); 
    $scope.myData = $scope.myData.filter(function(item) { 
    return (item.name.indexOf(name)>-1 || item.age.toString().indexOf(age) > -1); 
    }); 
}; 

$scope.originalDataSet = [{name: "Moroni", age: 50}, 
       {name: "Tiancum", age: 43}, 
       {name: "Jacob", age: 27}, 
       {name: "Nephi", age: 29}, 
       {name: "Enos", age: 34}]; 

$scope.myData = angular.copy($scope.originalDataSet, []); 

$scope.gridOptions = { 
    data: 'myData', 
    filterOptions: $scope.filterOptions 
}; 
});

가 그냥 기본 필터링 (u se regex 및/또는 더 나은 일치를 위해 소문자로 변환). 또한 이름과 나이가 모두 비어 있으면 이름을 ''로 설정하면 모든 요소가 필터 내부에서 true를 반환하므로 전체 데이터 세트가 반환됩니다.

이 옵션은 훨씬 더 적합 동적 데이터 세트 (읽기 - 서버를 공급)하는 것입니다,하지만 그것은 단지뿐만 아니라하지만, 원래의 데이터 집합을 복제 해에 필터를 적용 작동합니다.

출처

2013-08-24 17:19:59

+1 곧 plunker를 넣어 줄께, 나를 위해 일했다! –

답변

관련 문제