Фильтры в angular js. Создание собственных фильтров в angular
В этом уроке мы рассмотрим использование фильтров в angularjs. В angluar есть несколько встроенных фильтров. Также мы создадим собственный фильтр при помощи метода filter.
Ниже приведен список встроенных фильтров в angular:
- uppercase — форматирует строку к верхнему регистру
- lowercase — форматирует строку к нижнему регистру
- number — форматирует число к строке
- limitTo — ограничивает вывод элементов исходя из указанного числа
- date — фопматирует дату к указанному формату
- currency — форматирует число к валюте
- filter — выбирает элементы из входного массива
Код урока (встроенные фильтры)
<!DOCTYPE html>
<html ng-app="filtersApp">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="filterCtrl">
<p>{{upperWord | uppercase}}</p>
<p>{{lowerWord | lowercase}}</p>
<p>{{456.78 | number:1}}</p>
<p>{{50 | currency}}</p>
<p>{{12834554645 | date: 'dd.mm.yyyy'}}</p>
<script src="angular.js"></script>
<script>
var app = angular.module("filtersApp", []);
app.controller('filterCtrl', function($scope){
$scope.upperWord = "Камиль";
$scope.lowerWord = "Камиль";
});
</script>
</body>
</html>
Как вы поняли из прошлых примеров, фильтры записываются в представлении после прямой черты.
Благодаря двухстороннему связыванию в angular мы можем использовать фильтры в связке с различными событиями — например, фильтрация данных по клику, или фильтрация при вводе. В примерах это фильтр sortByName и встроенный фильтр filter в связке с моделью selectPlayers (живой поиск) соответсвенно.
Благодаря двухстороннему связыванию в angular мы можем использовать фильтры в связке с различными событиями — например, фильтрация данных по клику, или фильтрация при вводе. В примерах это фильтр sortByName и встроенный фильтр filter в связке с моделью selectPlayers (живой поиск) соответсвенно.
Но как и любой фреймворк, суть angular заключается и в том, чтобы у разработчика была возможность расширять возможности имеющегося функционала, в данном случае создание собственных фильтров. Для этого в angular есть замечательный фабричный метод filter.
Метод filter принимает два параметра — название фильтра (которе вы будете использовать в представлении, второй параметр — функция непосредственной фильтрации).
Код урока
<!DOCTYPE html>
<html ng-app="playersApp">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
/*input.ng-invalid-required {
border: 1px solid red;
}*/
</style>
</head>
<body>
<div class="container" ng-controller="playerCtrl">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" name="addPlayerForm" novalidate>
<legend>Список футболистов</legend>
<div class="form-group" ng-class="{'has-error': addPlayerForm.pName.$error.required && addPlayerForm.pName.$dirty}">
<label for="playerName" class="col-sm-4 control-label">Имя игрока</label>
<div class="col-sm-8">
<input type="text" required name="pName" ng-model="playerName" class="form-control" id="playerName" placeholder="Имя игрока">
<span class="error" ng-show="addPlayerForm.pName.$dirty && addPlayerForm.pName.$error.required">Введите имя игрока!</span>
</div>
</div>
<div class="form-group">
<label for="playerTeam" class="col-sm-4 control-label">В какой команде играет</label>
<div class="col-sm-8">
<input type="text" name="pTeam" ng-model="playerTeam" class="form-control" id="playerTeam" placeholder="В какой команде играет">
</div>
</div>
<div class="form-group" ng-class="{'has-error': addPlayerForm.pCountry.$error.required && addPlayerForm.pCountry.$dirty}">
<label for="playerCountry" class="col-sm-4 control-label">Гражданство</label>
<div class="col-sm-8">
<input type="text" required name="pCountry" ng-model="playerCountry" class="form-control" id="playerCountry" placeholder="Гражданство">
<span class="error" ng-show="addPlayerForm.pCountry.$dirty && addPlayerForm.pCountry.$error.required">Игрок не может быть без гражданства!</span>
</div>
</div>
<div class="form-group">
<label for="playerGoals" class="col-sm-4 control-label">Сколько голов забил</label>
<div class="col-sm-8">
<input type="text" name="pGoals" ng-model="playerGoals" class="form-control" id="playerGoals" placeholder="Сколько голов забил">
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-4">
<button ng-disabled="addPlayerForm.pName.$invalid || addPlayerForm.pCountry.$invalid" ng-click="addPlayer(playerName, playerTeam, playerCountry, playerGoals)" class="btn btn-default">Добавить</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" name="pSelect" ng-model="selectPlayers" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th ng-click="sortByName('name')">Игрок</th>
<th>Команда</th>
<th>Национальность</th>
<th>Сколько голов забил</th>
</tr>
</thead>
<tbody>
<!--<tr ng-repeat="player in players | orderBy:nameSorting | filter: selectPlayers | limitTo:2">
<td>{{player.name}}</td>
<td>{{player.team}}</td>
<td>{{player.country}}</td>
<td>{{player.goals}}</td>
</tr>-->
<tr ng-repeat="player in players | goalsFilter">
<td>{{player.name}}</td>
<td>{{player.team}}</td>
<td>{{player.country}}</td>
<td>{{player.goals}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="angular.js"></script>
<script>
var app = angular.module("playersApp", []);
var model = [];
app.controller("playerCtrl", function($scope){
$scope.players = model;
$scope.orderByFunction = function(player){
return parseInt(player.goals);
};
$scope.addPlayer = function(playerName, playerTeam, playerCountry, playerGoals) {
$scope.players.push({name: playerName, team: playerTeam, country: playerCountry, goals: playerGoals});
}
$scope.sortByName = function(p) {
$scope.nameSorting = p;
}
});
app.filter("goalsFilter", function() {
return function(item) {
var tenGoals = [];
for(i=0; i<item.length; i++) {
if(item[i].goals > 10) {
tenGoals.push(item[i]);
}
}
return tenGoals;
}
});
</script>
</body>
</html>
0 Комментариев