컨트롤러에서 필터를 사용하는 방법은 무엇입니까?
저는 당신이 전달하는 인수를 기반으로 데이터를 반환하는 필터 함수를 작성했습니다.컨트롤러에 동일한 기능이 필요합니다.컨트롤러에서 필터 기능을 재사용할 수 있습니까?
이것이 제가 지금까지 시도한 것입니다.
function myCtrl($scope,filter1)
{
// i simply used the filter function name, it is not working.
}
컨트롤러에 $filter 주입
function myCtrl($scope, $filter)
{
}
그런 다음 해당 필터를 사용할 위치에 상관없이 다음과 같이 사용합니다.
$filter('filtername');
해당 필터에 인수를 전달하려면 별도의 괄호를 사용하여 전달합니다.
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}
에▁where디arg1이며 "는 " " 입니다.arg2필터링에 사용되는 개체입니다.
@Prashanth가 제공한 답은 맞지만, 그렇게 하는 더 쉬운 방법이 있습니다.으로 주사를 에.$filter과 그것을하는 것.$filter('filtername')(arg1,arg2);) being: + )을 할 수 필터 이름과 추가로Filter접미사
질문에서 예를 들어 다음과 같이 적을 수 있습니다.
function myCtrl($scope, filter1Filter) {
filter1Filter(input, arg1);
}
해야 할 점은 합다니야해추를 입니다.Filter 이름: foo는 "를 호출하여 됩니다.fooFilter
는 fooFilter를 합니다.fooFilterFilter
다음 샘플 코드를 사용하여 각 컨트롤러의 배열을 이름별로 필터링할 수 있습니다.이는 다음 설명을 기반으로 합니다.http://docs.angularjs.org/guide/filter
this.filterArray = 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>
다음은 사용 방법의 다른 예입니다.filter각도 트롤러:
$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);
});
참고: 모든 필터에 액세스할 수 있습니다.
할당$filtervariable
하면 이옵사면을 할 수 .$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);
});
어떤 것을 사용할지는 개인적인 선호도에 따르지만, 세 번째를 사용하는 것이 가장 읽기 쉬운 옵션이기 때문에 권장합니다.
function ngController($scope,$filter){
$scope.name = "aaaa";
$scope.age = "32";
$scope.result = function(){
return $filter('lowercase')($scope.name);
};
}
컨트롤러 메서드의 두 번째 인수 이름은 "$filter"여야 하며 필터 기능만 이 예제에서 작동합니다.이 예에서는 "소문자" 필터를 사용했습니다.
프로세스를 위해 만든 또 다른 예가 있습니다.
다음과 같은 값이 포함된 어레이가 제공됩니다.Description(설명)
states = [{
status: '1',
desc: '\u2713'
}, {
status: '2',
desc: '\u271B'
}]
my 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('filtername')(arg1, arg2)에서 arg2로 함수를 사용할 수 있다는 것은 아무도 언급하지 않은 것 같습니다.
예:
$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
컨트롤러에서 $filter를 사용하는 간단한 날짜 예는 다음과 같습니다.
var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");
여기에 설명된 바와 같이 - https://stackoverflow.com/a/20131782/262140
Javascript 각도 필터에서 단일 값 대신 여러 조건을 추가하려면 아래 코드를 사용합니다.
var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)
먼저 컨트롤러에 $filter를 주입하여 앱 내에 ngSanitize가 로드되었는지 확인하고, 나중에 컨트롤러 사용량은 다음과 같습니다.
$filter('linky')(text, target, attributes)
컨트롤러에서 개체를 필터링하려면 다음을 시도하십시오.
var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
return obj;
});
if 조건에 따라 필터링된 개체를 반환합니다.
Angular.js 필터 재사용 - 보기/컨트롤러
이 솔루션에서는 Angular Filters 재사용에 대해 설명합니다.이것은 데이터를 필터링하는 또 다른 방법입니다. 구글은 제가 필요로 할 때 저를 여기에 두었습니다. 저는 공유하는 것을 좋아합니다.
사용 사례
이미 필터링 중인 경우(아래와 같이 보기에서 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"는 엄격한 비교를 원하는 것을 지정합니다.생략하면 여러 열에 걸쳐 값을 검색할 수 있습니다.
https://docs.angularjs.org/api/ng/filter/filter
언급URL : https://stackoverflow.com/questions/14302267/how-to-use-a-filter-in-a-controller
'codememo' 카테고리의 다른 글
| 공유 코드 프로젝트(.shproj)를 생성하는 방법 (0) | 2023.05.18 |
|---|---|
| RxJs 5에서 Angular Http 네트워크 호출의 결과를 공유하는 올바른 방법은 무엇입니까? (0) | 2023.05.18 |
| LINQ를 사용하여 문자열[]을 코드 한 줄에서 int[]로 변환 (0) | 2023.05.18 |
| X-Frame-옵션 여러 도메인에서 허용 (0) | 2023.05.18 |
| 호스트 대 Dnsafe 호스트 (0) | 2023.05.13 |