2017-01-31 2 views
0

UI Grid 모듈을 사용하는 AngularJS 프로젝트에서 작업하고 있습니다. 옵션으로 행 필터링을 사용하고 싶지만 많은 사용자가 필요로하지 않으며 필터 상자가 많은 공간을 차지하므로 필터링 옵션을 비활성화하고 필요에 따라 활성화 할 수있는 버튼이 필요합니다. 그래서 enableFiltering: false을 설정하고 $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;을 실행하는 버튼에 추가했습니다.하지만 아무 것도하지 않는 것 같습니다. 더 많은 테스트를 한 후, 내가 enableFiltering: true으로 시작한다면, 버튼을 클릭해도 즉시 아무 것도하지 않을 것이지만, 클릭 한 다음 필터 상자 중 하나에 입력하려고하면 시작하자마자 사라질 것입니다. 타이핑 (버튼을 다시 클릭해도 다시 나타나지 않음).그리드 옵션을 변경 한 후 UI Grid가 즉시 업데이트되지 않습니다.

제대로 작동하는 방법에 대해 알고 싶습니다. 나는 이미 $ scope를 시도했지만, $ application()을 통해서만 "Error : [$ rootScope : inprog] $가 이미 적용 중입니다." 여기 Plunker : http://plnkr.co/edit/L5bgA4XukmYJaVQHVkgR 여기

답변

0

당신은 내가 추측 원하는 것입니다 : 통지 uiGridConstant

  • 추가 gridApi을 주조 http://ui-grid.info/docs/#/tutorial/103_filtering

    angular.module('app',['ui.grid']).controller('Ctrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants){ 
        $scope.toggle = function(){ 
        $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering; 
        $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); 
        } 
        $scope.gridOptions = { 
        data: [{name:'Bob',age:20},{name:'Joe',age:21}], 
        enableFiltering: true, 
        onRegisterApi: function(gridApi){ 
         $scope.gridApi = gridApi; 
        }, 
        } 
    }]); 
    
    1. : UI 그립 웹 사이트에서이 예제에서 영감을 http://plnkr.co/edit/Qyts0zQrltx4QxlOWgob?p=preview

      데이터가 ui-grid로 변경됩니다.

    2. 클릭 할 때 gridApi 사용 토글
  • +0

    고마워요! notifyDataChange는 제가 누락 된 전부였습니다. 이제는 완벽하게 작동합니다. –