반응형
체인 매는 법 각진컨트롤러의 JS 필터
필터가 거의 보이지 않습니다.
<tr ng-repeat="x in list | filter:search| offset:currentPage*pageSize| limitTo:pageSize ">
좋은 결과를 얻기 위해서는 컨트롤러에서 이 필터링을 볼 수 없도록 해야 합니다.
나는 기본적인 구문을 알고 있습니다.$filter('filter')('x','x')하지만 저는 컨트롤러에서 필터 체인을 만드는 방법을 모르기 때문에 템플릿에서 제 예제처럼 모든 것이 작동할 것입니다.
필터 하나만으로 해결할 수 있는 방법을 찾았지만 많은 경우에 사용할 수 있습니다 ;)
$scope.data = data; //my geojson from factory//
$scope.geojson = {}; //i have to make empty object to extend it scope later with data, it is solution i found for leaflet //
$scope.geojson.data = [];
$scope.FilteredGeojson = function() {
var result = $scope.data;
if ($scope.data) {
result = $filter('limitTo')(result,10);
$scope.geojson.data = result;
console.log('success');
}
return result;
};
그리고 ng-repeat는 잘 작동하지만 필터가 거의 없는 상태에서 이 기능을 사용합니다.
첫 번째 필터에서 반환된 내용을 다시 필터링할 수 있습니다.뭐 이런 거.
var filtered;
filtered = $filter('filter')($scope.list, {name: $scope.filterParams.nameSearch});
filtered = $filter('orderBy')(filtered, $scope.filterParams.order);
아래 플렁커는 위의 내용을 보여줍니다.
http://plnkr.co/edit/Ej1O36aOrHoNdTMxH2vH?p=preview
이전 결과에 필터를 명시적으로 적용할 뿐만 아니라 여러 필터를 함께 연결할 개체를 만들 수도 있습니다.
컨트롤러
angular.module('Demo', []);
angular.module('Demo')
.controller('DemoCtrl', function($scope, $filter) {
$scope.order = 'calories';
$scope.filteredFruits = $scope.fruits = [{ name: 'Apple', calories: 80 }, { name: 'Grapes', calories: 100 }, { name: 'Lemon', calories: 25 }, { name: 'Lime', calories: 20 }, { name: 'Peach', calories: 85 }, { name: 'Orange', calories: 75 }, { name: 'Strawberry', calories: 65 }];
$scope.filterFruits = function(){
var chain = new filterChain($scope.fruits);
$scope.filteredFruits = chain
.applyFilter('filter', [{ name: $scope.filter }])
.applyFilter('orderBy', [ $scope.order ])
.value;
};
function filterChain(value) {
this.value = value;
}
filterChain.prototype.applyFilter = function(filterName, args) {
args.unshift(this.value);
this.value = $filter(filterName).apply(undefined, args)
return this;
};
});
보다
<!doctype html>
<html ng-app="Demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="filter" ng-change="filterFruits()" placeholder="Filter Fruits" />
<select ng-model="order">
<option value="name">name</option>
<option value="calories">calories</option>
</select>
<div ng-repeat="fruit in filteredFruits">
<strong>Name:</strong> {{fruit.name}}
<strong>Calories:</strong> {{fruit.calories}}
</div>
</div>
</body>
</html>
이는 Lodash 또는 Ramda와 같은 FP 라이브러리의 전형적인 경우입니다.공통 데이터가 각 필터에 마지막 arg로 적용되었는지 확인합니다.(이 경우 열)
$scope.columnDefs = _.compose(
$filter('filter3'),
$filter('filter2'),
$filter('filter1')
)($scope.columns)
아니면 여분의 아르그와 함께.
$scope.columnDefs = _.compose(
$filter('filter3').bind(null, optionalArg1, optionalArg2),
$filter('filter2').bind(null, optionalArg1),
$filter('filter1')
)($scope.columns)
언급URL : https://stackoverflow.com/questions/27852445/how-to-chain-angularjs-filters-in-controller
반응형
'programing' 카테고리의 다른 글
| Django 및 AngularJS를 사용하여 POST 요청(CSRF 토큰 포함)을 생성하는 방법 (0) | 2023.09.19 |
|---|---|
| 웹팩으로 실제 Window 개체에 jQuery 노출 (0) | 2023.09.19 |
| 데이터 프레임을 분할하는 방법? (0) | 2023.09.19 |
| Python 3의 문에 SQL 삽입을 위한 구문 형식 지정 (0) | 2023.09.19 |
| 카테고리 ID별로 제품 가져오기 (0) | 2023.09.19 |