AngularJs Learning Partie 8 Création de filtres-js tutoriel-php.cn

AngularJs Learning Partie 8 Création de filtres

高洛峰

Libérer： 2017-02-07 14:07:37

original

837 Les gens l'ont consulté

démo

Voici l'exemple de démo complet

1 fichier filter.js

angular.module("exampleApp", [])
.constant("productsUrl", "http://localhost:/products")
.controller("defaultCtrl", function ($scope, $http, productsUrl) {
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接转成了数组
});
});

Copier après la connexion

Ici. Je suis L'avantage d'écrire le service introduit sous forme de constante est qu'il est facile pour moi de le modifier.

Pour savoir comment utiliser le service $http, veuillez vous référer à mon AngularJs (3) Déployé à l'aide de

<!DOCTYPE html>
<html xmlns="http://www.w.org//xhtml" ng-app="exampleApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-"/>
<title></title>
<script src="angular.js"></script>
<link href="bootstrap-theme.css" rel="stylesheet" />
<link href="bootstrap.css" rel="stylesheet" />
<script src="filter.js"></script>
</head>
<body ng-controller="defaultCtrl" >
<div class="panel">
<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
<table class="table table-striped table-condensed">
<thead>
<tr>
<td>Name</td><td>Category</td><td>Price</td><td>expiry</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in products">
<td>{{item.name | uppercase}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry| number }}</td>
<td>{{item | json}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Copier après la connexion

Résultats en cours d'exécution :

AngularJs学习第八篇过滤器filter创建

Utiliser le filtre

Les filtres sont divisés en deux catégories :

1. Filtrage de données uniques

1. 🎜>

2. Faire fonctionner la collecte.

1. Il est relativement simple d'exploiter les données Comme le montre la démo, vous pouvez les formater en {{item |

Devise : "f" peut filtrer le prix en livres.

Filtrer pour des données uniques Si vous souhaitez filtrer le format des données, utilisez : dans le caractère de format correspondant après le filtre.

Nombre : indique les décimales réservées des données,

Deux : définir le filtrage, filtrer un certain nombre de l'ensemble.

<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
Limit:<select ng-model="limitValue" ng-options="p for p in limitRange" ></select>
</div>
　　filter.js中加入了：
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接转成了数组
$scope.limitValue = "";//要是字符串
<span style="background-color: rgb(, , );"> $scope.limitRange = [];
for (var i = ; i <= $scope.products.length; i++) {
$scope.limitRange.push(i.toString());
<span style="background-color: rgb(, , );"> }</span></span>
});
　<tr ng-repeat="item in products|limitTo:limitValue">
<td>{{item.name | uppercase}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry| number }}</td>
<td>{{item | json}}</td>
</tr> 　　
<span style="line-height: .; font-family: verdana, Arial, Helvetica, sans-serif; font-size: px; background-color: rgb(, , );">　</span>

Copier après la connexion

Dans la démo de base, j'ai ajouté ceci :

La fonction que vous écrivez doit être écrite avec succès car il s'agit d'obtenir des données json asynchrones.

Résultat : AngularJs学习第八篇过滤器filter创建

limite : Vous pouvez ajuster le nombre affiché sur la page.

Créer un filtre

AngularJs a deux types de filtres Tout d'abord, nous pouvons créer un filtre qui formate des données individuelles, par exemple : la première lettre de la chaîne de sortie est. capitalisé.

Parlons d'abord de la façon de définir un filtre : Les filtres sont créés via module.filter, et le format général de création est :

angular.module("exampleApp ") //Indique l'obtention d'un module. Les filtres sont créés sous les modules.

.filter("labelCase", function () { //Reçoit deux paramètres, le premier paramètre représente le nom du filtre et le second est une fonction d'usine

if(angular.isString(value))
{
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
}else
{
return value;
}
}
});

Copier après la connexion

return function (value, reverse) { //Renvoie une fonction de travail, correspondant au processus de filtrage correspondant Le premier paramètre indique l'objet qui doit être formaté, et le deuxième paramètre indique la configuration selon quel format <🎜. >

J'ai écrit ceci dans un fichier js N'oubliez pas d'ajouter

<link href="bootstrap.css" rel="stylesheet" />
<script src="filter.js"></script>
<script src="customFilter.js"></script>

Copier après la connexion

<td>{{item.name | labelCase:true}}</td>

Copier après la connexion

Comme mentionné précédemment, si vous devez ajouter des informations de configuration, le format d'écriture est un filtre : option

Bien sûr, les paramètres par défaut peuvent être omis, et ils seront par défaut sur une valeur nulle ou non définie

Résultat :

Personnalisez une fonction de filtre pour chaque traitement de données. . C'est aussi simple que cela.

2. Personnalisez une fonction de traitement de collection, tout comme limitTo

angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
} else {
return value;
}
}
})
.filter("skip", function () {
return function(data,count)
{
if (angular.isArray(data) && angular.isNumber(count)) {
if(data.length<count || count<)
{
return data;
}else
{
return data.slice(count);
}
} else {
return data;
}
}
});

Copier après la connexion

Partie modifiée HTML :

<🎜. >

<tr ng-repeat="item in products | skip: ">

Copier après la connexion

Résultat : Il y a six éléments de données au total, et le filtre de saut a été utilisé pour transmettre 2 éléments

Lors de la personnalisation des filtres, j'ai trouvé. qu'un filtre a déjà été défini. Je ne souhaite pas le définir à nouveau. Que dois-je faire ? On peut également utiliser le filtre créé précédemment pour le créer. >　 $filter('skip') appelle le filtre skip, car il renvoie une fonction, nous pouvons donc continuer à passer des paramètres >

Résultat : AngularJs学习第八篇过滤器filter创建

<🎜. >

C'est tout.

angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
} else {
return value;
}
}
})
.filter("skip", function () {
return function (data, count) {
if (angular.isArray(data) && angular.isNumber(count)) {
if (data.length < count || count < ) {
return data;
} else {
return data.slice(count);
}
} else {
return data;
}
}
})
.filter("take", function ($filter) {//大家可以看到，我在工厂函数引用了AngularJs的内置服务。
return function (data, skipcount, takecount) {//大家看下我这里传了三个参数？
var skipdata = $filter(&#39;skip&#39;)(data, skipcount);//这种写法大家是否迷糊了呢？函数式编程。
return $filter("limitTo")(skipdata, takecount);//limitTo是内置的过滤器。
}
});

Copier après la connexion

Plus d'AngularJs Pour en savoir plus sur le huitième article relatif à la création de filtres, veuillez prêter attention au site Web PHP chinois