Angular - filtry
Filtry
Przykładowy filtr
Filtry dodaje się do właściwości znaczników HTML. Poniżej dla modelu rep
zostosowano filtr do sortowania, wyświetlania tylko 15 rekordów oraz własny filtr filter:{ language : 'C#'}
.
<tr ng-repeat="rep in repos | orderBy:sortOrder | filter:{ language : 'C#'} | limitTo:15 ">
sortOrder
określa według której wartości ma się odbyć sortowanie. Właściwość ta znajduje się w kontrolerze.
$scope.sortOrder = "name";
Dodatkowo można zastosować znacznik select
do zmiany trybu sortowania.
<select ng-model="sortOrder">
<option value="+name">Nazwa Od A</option>
<option value="-name">Nazwa Od Z</option>
<option value="stargazers_count">Gwiazdy</option>
</select>
Własny filtr
<!doctype html>
<html ng-app="myApp">
<head>
<title>Filtr niestandardowy AngularJS</title>
</head>
<body>
<div ng-controller="myController">
<h2>Sortowanie i filtrowanie</h2>
{{phrase | censor:"***"}}<br>
{{"To jest niedobry, mroczny i ponury tekst." | censor:"radosny"}}
<p ng-click="filterText()">{{txt}}</p>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="js/angular_filter_custom.js"></script>
</body>
</html>
Poniższy filtr służy do zastępowania wyrazów niedobry, ponury i mroczny przez wartość replacement
.
angular.module('myApp', []).
filter('censor', function() {
return function(input, replacement) {
var cWords = ['niedobry', 'ponury', 'mroczny'];
var out = input;
for(var i=0; i < cWords.length; i++){
out = out.replace(cWords[i], replacement);
}
return out;
};
}).
controller('myController', ['$scope', 'censorFilter',
function($scope, censorFilter) {
$scope.phrase="To jest niepoprawna fraza.";
$scope.txt = "Kliknij, aby odfiltrowaæ wyrazy: mroczny i ponury.";
$scope.filterText = function(){
$scope.txt = censorFilter($scope.txt, '<>');
};
}]);