Maison > Article > interface Web > Comment utiliser l'utilisation du filtre personnalisé AngularJS
Comment utiliser l'utilisation du filtre personnalisé AngularJS
- php中世界最好的语言original
- 2018-05-29 10:37:191442parcourir
Cette fois, je vais vous montrer comment utiliser les filtres personnalisés AngularJS et quelles sont les précautions d'utilisation des filtres personnalisés AngularJS. Ce qui suit est un cas pratique, jetons un coup d'œil.
Structure du filtre
{{带过滤数据 | 过滤器名：参数1：参数2：参数3.....}}
app.filter('过滤器名', function () {
return function (待过滤数据, 参数....) {
......
return 已过滤数据;
}
Exemple 1 : s'il faut inclure
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<p ng-controller="myAppCtrl">
<p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<!--写法1-->
<tr ng-repeat="friend in friends |myfilter">
<!--写法2-->
<!--<tr ng-repeat="friend in newArr=(friends | myfilter)">-->
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
</p>
</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myAppCtrl", ["$scope", function ($scope) {
$scope.friends = [{name: 'John', phone: '44555-1276'},
{name: 'Annie', phone: '800-BIG-MARY'},
{name: 'Mike', phone: '11555-4321'},
{name: 'Adam', phone: '33555-5678'},
{name: 'David', phone: '387555-8765'},
{name: 'Mikay', phone: '555-5678'}];
}]);
app.filter("myfilter", function () {
return function (input) {
var output = [];
angular.forEach(input, function (value, key) {
console.log("value==" + JSON.stringify(value));
console.log("value.phone类型==" + typeof (value.phone));
console.log("value.phone.indexOf==" + value.phone.indexOf("555"));
/*js中没有contains方法，使用indexOf来判断字符串是否包含*/
/*indexOf字符串出现的位置，没有则返回-1*/
//方法一：
if (value.phone.indexOf("555") >= 0) {
output.push(value);
}
//方法二：
// if (value.phone.indexOf("555") !== -1) {
// output.push(value);
// }
});
return output;
}
});
</script>
</body>
</html>
Exemple 2 : Ordre inversé
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<p ng-controller="myAppCtrl">
姓名:{{ name }}<br>
倒序:{{ name | reverse }}<br>
倒序并大写:{{ name | reverse:true }}
</p>
<script type="text/javascript">
var myAppModule = angular.module("myApp", []);
myAppModule.controller("myAppCtrl", ["$scope", function ($scope) {
$scope.name = "xuqiang";
}]);
myAppModule.filter("reverse", function () {
return function (input, uppercase) {
<!--input就是其中name代表的值。-->
<!--uppercase这个bool值，判断是否要进行大小写转换。-->
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
if (uppercase) {
out = out.toUpperCase();
}
return out;
<!--返回过滤后的字符串-->
}
});
</script>
</body>
</html>
Exemple 3 : Remplacer
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-controller="myAppCtrl">
<p>
<p>
{{welcome | replaceHello}}<br/>
{{welcome | replaceHello:3:5}}<br/>
</p>
</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myAppCtrl", ["$scope", function ($scope) {
$scope.welcome = "Hello AngularJs";
}]);
//自定义过滤器
app.filter('replaceHello', function () {
return function (input, n1, n2) {
console.log("input==" + input);
console.log("n1==" + n1);
console.log("n2==" + n2);
return input.replace(/Hello/, '您好');
}
});
</script>
</body>
</html>
Exemple 4 : Filtre
<!doctype html>
<html ng-app="a3_3">
<head>
<title>自定义过滤器</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
<style type="text/css">
body {
font-size: 12px;
}
ul {
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
ul li {
float: left;
padding: 5px 0px;
}
ul .odd {
color: #0026ff;
}
ul .even {
color: #ff0000;
}
ul .bold {
font-weight: bold;
}
ul li span {
width: 52px;
float: left;
padding: 0px 10px;
}
ul .focus {
background-color: #cccccc;
}
</style>
</head>
<body>
<p ng-controller="c3_3">
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
<span>分数</span>
</li>
<li ng-repeat=" stu in data | young:0"
ng-class-odd="'odd'"
ng-class-even="'even'">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</p>
<script type="text/javascript">
var a3_3 = angular.module('a3_3', []);
a3_3.controller('c3_3', ['$scope', function ($scope) {
$scope.bold = "bold";
$scope.data = [
{name: "张明明", sex: "女", age: 24, score: 95},
{name: "李清思", sex: "女", age: 27, score: 87},
{name: "刘小华", sex: "男", age: 28, score: 86},
{name: "陈忠忠", sex: "男", age: 23, score: 97}
];
}]);
a3_3.filter('young', function () {
return function (e, type) {
var _out = [];
var _sex = type ? "男" : "女";
for (var i = 0; i < e.length; i++) {
if (e[i].age > 22 && e[i].age < 28 &&
e[i].sex == _sex)
_out.push(e[i]);
}
return _out;
}
});
</script>
</body>
</html>
Exemple 5 : Tri
<!doctype html>
<html ng-app="a3_4">
<head>
<title>表头排序</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
<style type="text/css">
body {
font-size: 12px;
}
ul {
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
ul li {
float: left;
padding: 5px 0px;
}
ul .bold {
font-weight: bold;
cursor: pointer;
}
ul li span {
width: 52px;
float: left;
padding: 0px 10px;
}
ul .focus {
background-color: #cccccc;
}
</style>
</head>
<body>
<p ng-controller="c3_4">
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span ng-click="title='name';desc=!desc">
姓名
</span>
<span ng-click="title='sex';desc=!desc">
性别
</span>
<span ng-click="title='age';desc=!desc">
年龄
</span>
<span ng-click="title='score';desc=!desc">
分数
</span>
</li>
<li ng-repeat=" stu in data | orderBy : title : desc">
<!--title：属性值，desc：升序or降序-->
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</p>
<script type="text/javascript">
var a3_4 = angular.module('a3_4', []);
a3_4.controller('c3_4', ['$scope', function ($scope) {
$scope.bold = "bold";
$scope.title = 'name';
$scope.desc = 0;
$scope.data = [
{name: "张明明", sex: "女", age: 24, score: 95},
{name: "李清思", sex: "女", age: 27, score: 87},
{name: "刘小华", sex: "男", age: 28, score: 86},
{name: "陈忠忠", sex: "男", age: 23, score: 97}
];
}])
</script>
</body>
</html>
Exemple 6 : Filtrage des entrées
<!doctype html>
<html ng-app="a3_5">
<head>
<title>字符查找</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
<style type="text/css">
body {
font-size: 12px;
}
ul {
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
ul li {
float: left;
padding: 5px 0px;
}
ul .bold {
font-weight: bold;
cursor: pointer;
}
ul li span {
width: 52px;
float: left;
padding: 0px 10px;
}
ul .focus {
background-color: #cccccc;
}
</style>
</head>
<body>
<p ng-controller="c3_5">
<p>
<input id="txtkey" type="text"
ng-model="key" placeholder="请输入姓名关键字"/>
</p>
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
<span>分数</span>
</li>
<li ng-repeat=" stu in data | filter : {name:key}">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</p>
<script type="text/javascript">
var a3_5 = angular.module('a3_5', []);
a3_5.controller('c3_5', ['$scope', function ($scope) {
$scope.bold = "bold";
$scope.key = '';
$scope.data = [
{name: "张明明", sex: "女", age: 24, score: 95},
{name: "李清思", sex: "女", age: 27, score: 87},
{name: "刘小华", sex: "男", age: 28, score: 86},
{name: "陈忠忠", sex: "男", age: 23, score: 97}
];
}])
</script>
</body>
</html>
Je crois que vous maîtrisez la méthode après lecture C'est le cas dans cet article , pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment utiliser les modèles de chaînes dans Vue
Comment gérer l'erreur d'économie d'installation Mac due à bisons
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser Angular pour implémenter des fonctions de validation personnalisées de formulaires basés sur des modèlesArticle suivant：Comment utiliser Angular pour implémenter des fonctions de validation personnalisées de formulaires basés sur des modèles
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript