tutorial pengembangan web terbaru
 

AngularJS Filter Filter


Contoh

Menampilkan item yang berisi huruf "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>
Cobalah sendiri "

Definisi dan Penggunaan

The filter Filter memungkinkan kita untuk menyaring array, dan mengembalikan array yang berisi hanya item yang sesuai.

Filter ini hanya dapat digunakan untuk array.


Sintaksis

{{ arrayexpression | filter : expression : comparator }}

Nilai parameter

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.

Contoh lebih

Contoh

Menggunakan objek sebagai filter:

<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>
Cobalah sendiri "

Contoh

Melakukan "ketat" perbandingan, yang tidak kembali pertandingan kecuali nilai adalah persis sama dengan ungkapan:

<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>
Cobalah sendiri "

Pages terkait

AngularJS Tutorial: Filter sudut