반응형
내 데이터를 필터링하는 방법은? (ng-grid)
저는 이것이 매우 간단할 것이라고 생각하지만 '필터' 외부에 필터를 추가하는 방법에 대한 명확한 문서를 찾을 수 없습니다.그들의 웹사이트에 있는 '문자'.제가 하려는 것은 이와 같이 간단한 것입니다.
$scope.filterOptions = {
filter: $scope.myFilter, // <- How to do something like this?
useExternalFilter: true
}
$scope.gridOptions = {
data: 'entries',
enableColumnResize: false,
multiSelect: false,
enableSorting: false,
selectedItems: $scope.selectedEntries,
filterOptions: $scope.filterOptions
}
$scope.lowerLimit = 50;
// My Filter
$scope.myFilter = function(entry) {
if (entry < $scope.lowerLimit) {
return false;
}
return true;
}
편집: 아니면 데이터 소스를 어떻게든 필터링할 수 있다면 어떨까요?나는 이것을.
$scope.gridOptions = {
data: 'entries | filter: myFilter',
enableColumnResize: false,
multiSelect: false,
enableSorting: false,
selectedItems: $scope.selectedEntries,
}
하지만 그것은 꽤 많은 오류를 던지고 있습니다.
각을 사용하여 에 바인딩할 수 있습니다.filterOptions.filterText변수.여기에 시연할 플렁커(plunker)가 있습니다.
아래에 같은 코드를 게시하겠습니다.
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.filterOptions = {
filterText: ''
};
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
filterOptions: $scope.filterOptions
};
});
위 내용은 문서 페이지의 플렁커와 거의 동일해야 합니다.
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" />
<br/>
<br/>
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
알려드립니다ng-model="filterOptions.filterText"에서<input ...>. 그 정도면 돼요!
즉시 업데이트 할 수 있는 방법을 찾았습니다.기본적으로 나는 내 모든 데이터의 숨겨진 세트를 보유하고, 새로운 데이터를 받거나 필터를 변경할 때 - 나는 이 필터를 전체 데이터 세트에 적용하고, 그리드에 필터링된 버전을 전달합니다.
이 질문의 목적인 필터에서 비교기(즉, 나이 >= 50)를 사용할 수 있습니다.
// Full unfiltered data set
$scope.entries = []; // Updated and pushed to
$scope.gridOptions = {
// The grids already filtered data set
data: 'filteredEntries',
enableColumnResize: false,
multiSelect: false,
enableSorting: false,
selectedItems: $scope.selectedEntries,
}
$scope.$on("updateEntries", function(data) {
// My table is filled by socket pushes, this is where it is updated.
$scope.updateFilters();
}
$scope.$on("newFilter", function(newFilter) {
// This is where I update my filter
$scope.updateFilters();
}
$scope.updateFilters = function() {
// Filters the full set and hands the result to the grid.
$scope.filteredEntries = $filter('filter')($scope.entries, $scope.myFilter);
$scope.$digest();
}
// A modifiable limit, modify through newFilter so data is refiltered
$scope.lowerLimit = 50;
// My Filter
$scope.myFilter = function(entry) {
if (entry < $scope.lowerLimit) {
return false;
}
return true;
}
이것이 제 해결책입니다!!
html에서 ng-grid를 발견했습니다.
<input type="text" ng-model="miinput" placeholder="Filter text"/>
<div class="gridStyles" ng-grid="gridOpciones">
</div>
js 단위:
//pagination
$scope.filterOptions = {
filterText: $scope.miinput,
useExternalFilter: true
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [10, 25, 50],
pageSize: 10,
currentPage: 1
};
$scope.setPagingData = function(data, page, pageSize){
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.vocabulario = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {
data = largeLoad.filter(function(item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data,page,pageSize);
});
} else {
$http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {
$scope.setPagingData(largeLoad,page,pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
//cada vez que escribo en el input
$scope.$watch('miinput', function () {
if ($scope.miinput !== "") {
$scope.pagingOptions.currentPage=1;
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.miinput);
}else{
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
//
$scope.gridOpciones = {
data: 'vocabulario',
showGroupPanel: true,
enableCellSelection: true,
enableRowSelection: true,
enableCellEdit: true,
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
columnDefs: [
{field:'I', displayName:'Id', width:60,resizable: true},
{field:'T', displayName:'Type',visible:false,resizable: true},
{field:'N', displayName:'Level',width:60},
{field:'L', displayName:'List',width:100},
{field:'P', displayName:'English',minWidth: 400},
{field:'R', displayName:'Spanish', minWidth: 400}]
};
//JSON
[
{"I": "3001", "T": "F", "N": "3", "L": "01 a", "P": "HE IDO ALL\u00cd DOS VECES ESTA SEMANA", "R": "I'VE GONE THERE TWICE THIS WEEK"},
{"I": "3002", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L ME HA LLAMADO VARIAS VECES HOY", "R": "HE'S CALLED ME SEVERAL TIMES TODAY"},
{"I": "3003", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS LLEGADO A UNA CONCLUSI\u00d3N", "R": "WE'VE REACHED A CONCLUSION"},
{"I": "3004", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS DECIDIDO CANCELAR EL PROYECTO", "R": "WE'VE DECIDED TO CANCEL THE PROJECT"},
{"I": "3005", "T": "F", "N": "3", "L": "01 a", "P": "NO HAN HECHO NADA", "R": "THEY HAVEN'T DONE ANYTHING"},
{"I": "3006", "T": "F", "N": "3", "L": "01 a", "P": "HE PROBADO MUCHAS DIFERENTES PROFESIONES", "R": "I'VE TRIED MANY DIFFERENT PROFESSIONS"},
{"I": "3007", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L HA PERDIDO LA VOZ", "R": "HE'S LOST HIS VOICE"},
{"I": "3008", "T": "F", "N": "3", "L": "01 a", "P": "ELLA NO HA VENIDO POR AQU\u00cd \u00daLTIMAMENTE"}
]
언급URL : https://stackoverflow.com/questions/17977869/how-to-filter-my-data-ng-grid
반응형
'codememo' 카테고리의 다른 글
| html 엔티티를 해독하는 mysql 함수가 있습니까? (0) | 2023.10.30 |
|---|---|
| node.js 자식 프로세스 - 스폰과 포크의 차이 (0) | 2023.10.30 |
| 선택2에서 AJAX로 태그 지정 (0) | 2023.10.20 |
| JSR 303 Bean Validation + 자바스크립트 클라이언트측 Validation (0) | 2023.10.20 |
| 정적 클래스, 인터페이스 또는 xml 리소스 중에서 안드로이드에서 상수를 정의하는 가장 좋은 방법은 무엇입니까? (0) | 2023.10.20 |