2
하나의 열에 대해 UI - Grid에 사용자 정의 필터를 만들었습니다. 나는 적용된 필터와 정확히 일치에만 값을 필터링 할과하지에 포함 아래 정확한 일치를 필터링하기 위해 UI 격자의 사용자 정의 필터
사용자 정의 필터에 대한 내 컨트롤러이다.myapp2.controller('activityFilterCtrl', function($scope, $compile, $timeout) {
var $elm;
$scope.showAgeModal = function() {
$scope.listOfAges = ['TRL1','TRL2','TRL3','TRL4','TRL5','TRL6','Launch Gate','Alpha Gate','Beta Gate','H-O','Intermediate H-O','Internal Review','DEL','Evaluation','MIL'];
$scope.gridOptions = {
data: [],
enableColumnMenus: false,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
if ($scope.colFilter && $scope.colFilter.listTerm){
$timeout(function() {
$scope.colFilter.listTerm.forEach(function(activityType) {
var entities = $scope.gridOptions.data.filter(function(row) {
return row.activityType === activityType;
});
if(entities.length > 0) {
$scope.gridApi.selection.selectRow(entities[0]);
}
});
});
}
}
};
$scope.listOfAges.forEach(function(activityType) {
$scope.gridOptions.data.push({activityType: activityType});
});
var html = '<div class="modal" ng-style="{display: \'block\'}"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">Filter Ages</div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" ui-grid-selection class="modalGrid"></div></div><div class="modal-footer"><button id="buttonClose" class="btn btn-primary" ng-click="close()">Filter</button></div></div></div></div>';
$elm = angular.element(html);
angular.element(document.body).prepend($elm);
$compile($elm)($scope);
};
$scope.close = function() {
var ages = $scope.gridApi.selection.getSelectedRows();
$scope.colFilter.listTerm;
$scope.colFilter.listTerm=[];
ages.forEach(function(activityType) {
$scope.colFilter.listTerm.push(activityType.activityType);
});
$scope.colFilter.term = $scope.colFilter.listTerm.join(', ');
$scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
if ($elm) {
$elm.remove();
}
};
}) }
이 내 열입니다 해당 열의 정의 :
{
name: "Activity Type",
field: 'activityType',
visible: false,
headerTooltip:'Activity Type',
enableHiding: false,cellClass: 'scheduleData',
minWidth:150,enableFiltering: true,
filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div activity-filter-model></div></div>',
filter: {
condition: function(searchTerm, activityType) {
return activityType.indexOf(searchTerm) > -1
}
},
},
내가 col.Filter을 적용하는 동안, 컨트롤러에서 정규식을 사용하는 경우 나를 인도 해주십시오 조건 또는 열 def의 필터 조건이 작동하는지 확인하십시오.
답변을 "수락"으로 표시하는 것을 잊지 마십시오. 고마워, 제발. –