최신 웹 개발 튜토리얼
 

AngularJS필터 필터


문자 "A"를 포함하는 항목을 표시 :

<div ng-app="myApp" ng-controller="arrCtrl">

<ul>
<li ng-repeat="x in cars | filter : 'A'">{{x}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
    $scope.cars = ["Aston Martin", "Audi", "Bentley", "BMW", "Bugatti"];
});
</script>
»그것을 자신을 시도

정의 및 사용

filter 필터는 우리가 배열을 필터링하고 만 일치하는 항목을 포함하는 배열을 반환 할 수 있습니다.

이 필터는 어레이에 사용될 수있다.


통사론

{{ arrayexpression | filter : expression : comparator }}

매개 변수 값

Value Description
expression The expression used when selecting items from the array. The expression can be of type:

String: The array items that match the string will be returned.

Object: The object is a pattern to search for in the array. Example: {"name" : "H", "city": "London"} will return the array items with a name containing the letter "A", where the city contains the word "London". See example below.

Function: A function which will be called for each array item, and items where the function returns true will be in the result array.
comparator Optional. Defines how strict the comparison should be. The value can be:

true : Returns a match only if the value of the array item is exactly what we compare it with.

false : Returns a match if the value of the array item contains what we compare it with. This comparison is not case sensitiv. This is the default value.

function : A function where we can define what will be considered a match or not.

더 예

필터로 객체를 사용하여

<div ng-app="myApp" ng-controller="arrCtrl">

<ul>
<li ng-repeat="x in customers | filter : {'name' : 'O', 'city' : 'London'}">
    {{x.name + ", " + x.city}}
</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
    $scope.customers = [
        {"name" : "Alfreds Futterkiste", "city" : "Berlin"},
        {"name" : "Around the Horn", "city" : "London"},
        {"name" : "B's Beverages", "city" : "London"},
        {"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
        {"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"}
    ];
});
</script>
»그것을 자신을 시도

값이 표현과 완전히 다른 경우 일치하는 항목을 반환하지 않는 "엄격한"비교를 수행합니다

<div ng-app="myApp" ng-controller="arrCtrl">

<ul>
<li ng-repeat="x in customers | filter : 'London' : true">
    {{x.name + ", " + x.city}}
</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
    $scope.customers = [
        {"name" : "London Food", "city" : "London"},
        {"name" : "London Catering", "city" : "London City"},
        {"name" : "London Travel", "city" : "Heathrow, London"}
    ];
});
</script>
»그것을 자신을 시도

관련 페이지

AngularJS와 자습서 : 각도 필터