2
UIグリッドでカスタムフィルタを作成しました。 。 私が含まれている適用されるフィルタと正確に一致していない値のみをフィルタリングする正確な一致をフィルタリングする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();
}
};
}) }
と、これは私のコラムですその列のdef:
{
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のフィルター条件が機能するかどうかを調べます。
あなたの答えを「受け入れた」とマークすることを忘れないでください。ありがとう、してください。 –