답변:
컨트롤러에 $ filter 를 주입 하십시오
function myCtrl($scope, $filter)
{
}
그런 다음 해당 필터를 사용하려는 경우 다음과 같이 사용하십시오.
$filter('filtername');해당 필터에 인수를 전달하려면 별도의 괄호를 사용하여 인수를 수행하십시오.
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}
arg1필터링하려는 배열은 어디에 있고 필터링하는 arg2데 사용되는 객체입니다.
var anyNumber = $filter('number')(12.222222, 2);얻을 같은 숫자 필터를 사용할 수 있습니다 12.22.
$filter("currency")(price, "$", 2)따라서 가격이 200 인 경우 해당 표현식은 "$ 200.00"을 반환합니다.
$filter('filtter1')(2 t) 를 사용하면 오류를 알 수 없습니다 . 그러나 filtter1FilterAngular 를 주입 하면 종속성이 존재하지 않는다고 즉시 불평합니다.
@Prashanth의 답변은 정확하지만 더 쉬운 방법이 있습니다. 기본적으로 $filter종속성 을 주입하고 호출하는 어색한 구문을 사용 하는 대신 $filter('filtername')(arg1,arg2);필터 이름과 Filter접미사로 종속성을 주입 할 수 있습니다 .
질문에서 예를 들면 다음과 같습니다.
function myCtrl($scope, filter1Filter) {
filter1Filter(input, arg1);
}
Filter사용하는 명명 규칙에 관계없이 필터 이름에 추가해야합니다 . foo는 호출하여 참조됩니다. fooFilter
fooFilter는 호출 하여 참조됩니다.fooFilterFilter
다음 샘플 코드를 사용하여 각도 컨트롤러에서 배열을 이름별로 필터링 할 수 있습니다. 이것은 다음 설명을 기반으로합니다. http://docs.angularjs.org/guide/filter
this.filteredArray = filterFilter (this.array, {name : 'Igor'});
JS :
angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
this.array = [
{name: 'Tobias'},
{name: 'Jeff'},
{name: 'Brian'},
{name: 'Igor'},
{name: 'James'},
{name: 'Brad'}
];
this.filteredArray = filterFilter(this.array, {name:'Igor'});
}]);
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example96-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="FilterInControllerModule">
<div ng-controller="FilterController as ctrl">
<div>
All entries:
<span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
</div>
<div>
Filter By Name in angular controller
<span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
</div>
</div>
</body>
</html>filterAngular 컨트롤러에서 사용 하는 또 다른 예는 다음과 같습니다 .
$scope.ListOfPeople = [
{ PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
{ PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
{ PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
{ PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
{ PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
{ PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];
$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
return (person.Sex == "Female");
});
// This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");간단 해?
다음과 같은 간단한 필터가 있다고 가정 해 봅시다. 첫 번째 문자에 대해서만 매개 변수를 사용하여 문자열을 대문자로 변환합니다.
app.filter('uppercase', function() {
return function(string, firstCharOnly) {
return (!firstCharOnly)
? string.toUpperCase()
: string.charAt(0).toUpperCase() + string.slice(1);
}
});직접 통해 $filter
app.controller('MyController', function($filter) {
// HELLO
var text = $filter('uppercase')('hello');
// Hello
var text = $filter('uppercase')('hello', true);
});참고 : 모든 필터에 액세스 할 수 있습니다.
할당 $filterA와variable
이 옵션을 사용하면 다음 $filter과 같은 것을 사용할 수 있습니다 function.
app.controller('MyController', function($filter) {
var uppercaseFilter = $filter('uppercase');
// HELLO
var text = uppercaseFilter('hello');
// Hello
var text = uppercaseFilter('hello', true);
});특정로드 만 Filter
에 필터 이름을 추가하여 특정 필터 만로드 할 수 있습니다 Filter.
app.controller('MyController', function(uppercaseFilter) {
// HELLO
var text = uppercaseFilter('hello');
// Hello
var text = uppercaseFilter('hello', true);
});어떤 것을 사용하는 것이 개인 취향에 달려 있지만 가장 읽기 쉬운 옵션이므로 세 번째를 사용하는 것이 좋습니다.
내 프로세스를 위해 만든 또 다른 예가 있습니다.
이처럼 값 설명이있는 배열을 얻습니다.
states = [{
status: '1',
desc: '\u2713'
}, {
status: '2',
desc: '\u271B'
}]내 Filters.js에서 :
.filter('getState', function () {
return function (input, states) {
//console.log(states);
for (var i = 0; i < states.length; i++) {
//console.log(states[i]);
if (states[i].status == input) {
return states[i].desc;
}
}
return '\u2718';
};
})그런 다음 테스트 변수 (컨트롤러) :
function myCtrl($scope, $filter) {
// ....
var resp = $filter('getState')('1', states);
// ....
}AngularJs를 사용하면 템플릿 내부 또는 컨트롤러, 지시문 등에서 필터를 사용할 수 있습니다.
템플릿에서이 구문을 사용할 수 있습니다
{{ variable | MyFilter: ... : ... }}컨트롤러 내부에서 $ filter 서비스 주입을 사용할 수 있습니다.
angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
$filter('MyFilter')(arg1, arg2);
})데모 예제와 함께 더 필요한 경우 여기 링크가 있습니다
뷰에서 구문을 반영하는 필터를 평가하는 다른 방법이 있습니다. 호출은 털이 있지만 바로 가기를 작성할 수 있습니다. 나는 문자열의 구문이 당신이 볼 수있는 것과 동일하다는 것을 좋아한다. 다음과 같습니다 :
function myCtrl($scope, $interpolate) {
$scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}컨트롤러에서 $ filter를 사용하는 간단한 날짜 예는 다음과 같습니다.
var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd"); 여기에 설명 된대로-https: //stackoverflow.com/a/20131782/262140
자바 스크립트 각도 필터에서 단일 값 대신 여러 조건을 추가하려면 아래 코드를 사용하십시오.
var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)먼저 컨트롤러에 $ filter를 주입하여 ngSanitize가 앱 내에로드되고 나중에 컨트롤러 사용 범위는 다음과 같습니다.
$filter('linky')(text, target, attributes)Angular.js 필터 재사용-보기 / 컨트롤러
이 솔루션은 각도 필터 재사용을 다룹니다. 이는 데이터를 필터링하는 또 다른 방법이며, 필요할 때 Google이 여기에 착륙했습니다. 나는 공유하고 싶습니다.
사용 사례
뷰에서 ng-repeat (예 : 아래)와 같이 이미 필터링중인 경우 컨트롤러에서 필터를 다음과 같이 정의했을 수 있습니다. 그런 다음 최종 예제에서와 같이 재사용 할 수 있습니다.
필터 사용 예-보기에서 필터링 된 반복
<div ng-app="someApp" ng-controller="someController">
<h2>Duplicates</h2>
<table class="table table-striped table-light table-bordered-light">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in data | filter: searchDuplicate:true">
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
</tr>
</tbody>
</table>
</div>각도 필터 정의 예
angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {
$scope.people = [{name: 'Bob', gender: 'male' , hasDuplicate: true },
{name: 'Bob', gender: 'male' , hasDuplicate: true },
{name: 'Bob', gender: 'female', hasDuplicate: false}];
$scope.searchDuplicate = { hasDuplicate : true };
})따라서 여기서 개념은 이미 뷰용으로 생성 된 필터를 사용하고 있으며 컨트롤러에서도 필터를 사용하려는 것입니다.
컨트롤러 내 필터 기능 사용 예 1
var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)컨트롤러 내 필터 기능 사용 예 2
이전 필터를 사용하여 중복 항목이없는 경우에만 단추를 표시하십시오.
HTML 버튼
<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>표시 / 숨기기 버튼
$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };일부는이 버전의 필터링을 쉽게 찾을 수 있으며 Angular.js 옵션입니다.
보기 및 $ filter 함수 호출에 사용 된 선택적 비교기 매개 변수 "true"는 엄격한 비교를 원한다고 지정합니다. 생략하면 여러 열에서 값을 검색 할 수 있습니다.