AngularJS
필터
수색…
첫 번째 필터
필터는 페이지에 어떤 것을 인쇄하는 방법을 수정할 수있는 특별한 유형의 함수이거나 배열을 필터링하거나 ng-repeat 액션을 사용할 수 있습니다. app.filter() 메서드를 호출하여 이름과 함수를 전달하여 필터를 만들 수 있습니다. 구문에 대한 자세한 내용은 아래 예제를 참조하십시오.
예를 들어 문자열을 모두 대문자 (기본적으로 .toUpperCase() javascript 함수의 래퍼)로 변경하는 필터를 만듭니다.
var app = angular.module("MyApp", []);
// just like making a controller, you must give the
// filter a unique name, in this case "toUppercase"
app.filter('toUppercase', function(){
// all the filter does is return a function,
// which acts as the "filtering" function
return function(rawString){
// The filter function takes in the value,
// which we modify in some way, then return
// back.
return rawString.toUpperCase();
};
});
위의 상황을 자세히 살펴 보겠습니다.
첫째, "toUppercase"라는 필터를 만듭니다.이 필터는 컨트롤러와 같습니다. app.filter(...) . 그런 다음 해당 필터의 함수는 실제 필터 함수를 반환합니다. 이 함수는 필터링 할 개체 인 단일 개체를 사용하며 필터링 된 개체 버전을 반환해야합니다.
참고 : 이 상황에서는 필터에 전달되는 객체가 문자열이라고 가정하므로 항상 문자열에서만 필터를 사용하는 것이 좋습니다. 즉, 객체를 통해 반복되는 필터 (배열 인 경우)를 추가로 개선 한 다음 문자열 인 모든 요소를 대문자로 만들 수 있습니다.
이제 새로운 필터를 사용하십시오. 우리의 필터는 앵귤러 템플릿이나 자바 스크립트 함수 (삽입 된 각도 참조)로 두 가지 방법으로 사용할 수 있습니다.
자바 스크립트
각형 $filter 객체를 컨트롤러에 삽입 한 다음 그 이름을 사용하여 필터 함수를 검색하면됩니다.
app.controller("MyController", function($scope, $filter){
this.rawString = "Foo";
this.capsString = $filter("toUppercase")(this.rawString);
});
HTML
각도 지시문의 경우 파이프 ( | ) 기호 다음에 실제 문자열 뒤에 지시문의 필터 이름을 사용하십시오. 예를 들어 rawString 이라는 문자열을 요소로 갖는 MyController 라는 컨트롤러가 있다고 가정 해 봅시다.
<div ng-controller="MyController as ctrl">
<span>Capital rawString: {{ ctrl.rawString | toUppercase }}</span>
</div>
편집자 주 : Angular에는 "대문자"를 비롯한 많은 필터가 내장되어 있으며 "toUppercase"필터는 필터 작동 방식을 쉽게 보여주기위한 데모 용으로 만 제공되지만 대문자 기능을 직접 구현할 필요 는 없습니다 .
값을 제거하는 사용자 정의 필터
필터의 일반적인 사용 예는 배열에서 값을 제거하는 것입니다. 이 예에서는 배열을 전달하고 그 안에있는 모든 null을 제거하여 배열을 반환합니다.
function removeNulls() {
return function(list) {
for (var i = list.length - 1; i >= 0; i--) {
if (typeof list[i] === 'undefined' ||
list[i] === null) {
list.splice(i, 1);
}
}
return list;
};
}
HTML과 같이 사용됩니다.
{{listOfItems | removeNulls}}
또는 컨트롤러와 같은
listOfItems = removeNullsFilter(listOfItems);
값을 포맷하는 사용자 정의 필터
필터의 또 다른 사용 사례는 단일 값을 형식화하는 것입니다. 이 예제에서는 값을 전달하고 적절한 실제 부울 값을 반환합니다.
function convertToBooleanValue() {
return function(input) {
if (typeof input !== 'undefined' &&
input !== null &&
(input === true || input === 1 || input === '1' || input
.toString().toLowerCase() === 'true')) {
return true;
}
return false;
};
}
HTML에서 다음과 같이 사용됩니다.
{{isAvailable | convertToBooleanValue}}
또는 다음과 같은 컨트롤러에서 :
var available = convertToBooleanValueFilter(isAvailable);
하위 배열에서 필터 수행
이 예제는 사용자 정의 필터가 필요없이 하위 배열에서 심층 필터를 수행하는 방법을 보여주기 위해 수행되었습니다.
제어 장치:
(function() {
"use strict";
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
function mainCtrl() {
var vm = this;
vm.classifications = ["Saloons", "Sedans", "Commercial vehicle", "Sport car"];
vm.cars = [
{
"name":"car1",
"classifications":[
{
"name":"Saloons"
},
{
"name":"Sedans"
}
]
},
{
"name":"car2",
"classifications":[
{
"name":"Saloons"
},
{
"name":"Commercial vehicle"
}
]
},
{
"name":"car3",
"classifications":[
{
"name":"Sport car"
},
{
"name":"Sedans"
}
]
}
];
}
})();
전망:
<body ng-app="app" ng-controller="mainCtrl as main">
Filter car by classification:
<select ng-model="classificationName"
ng-options="classification for classification in main.classifications"></select>
<br>
<ul>
<li ng-repeat="car in main.cars |
filter: { classifications: { name: classificationName } } track by $index"
ng-bind-template="{{car.name}} - {{car.classifications | json}}">
</li>
</ul>
</body>
완전한 데모를 확인하십시오.
컨트롤러 또는 서비스에서 필터 사용
$filter 를 삽입하면 Angular 모듈에 정의 된 필터가 컨트롤러, 서비스, 지시문 또는 다른 필터에 사용될 수 있습니다.
angular.module("app")
.service("users", usersService)
.controller("UsersController", UsersController);
function usersService () {
this.getAll = function () {
return [{
id: 1,
username: "john"
}, {
id: 2,
username: "will"
}, {
id: 3,
username: "jack"
}];
};
}
function UsersController ($filter, users) {
var orderByFilter = $filter("orderBy");
this.users = orderByFilter(users.getAll(), "username");
// Now the users are ordered by their usernames: jack, john, will
this.users = orderByFilter(users.getAll(), "username", true);
// Now the users are ordered by their usernames, in reverse order: will, john, jack
}
ng-repeat 외부에서 필터링 된 목록에 액세스
간혹 필터링 된 항목의 수를 나타 내기 위해 ng-repeat 외부에서 필터의 결과에 액세스하려는 경우가 있습니다. ng-repeat 에서 as [variablename] 구문을 사용하여이 작업을 수행 할 수 있습니다.
<ul>
<li ng-repeat="item in vm.listItems | filter:vm.myFilter as filtered">
{{item.name}}
</li>
</ul>
<span>Showing {{filtered.length}} of {{vm.listItems.length}}</span>