示例一：是否包含

Name
Phone


{{friend.name}}
{{friend.phone}}





varapp=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(){
returnfunction(input){
varoutput=[];
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);
//}
});
returnoutput;
}
});

示例二：倒序

姓名:{{name}}

倒序:{{name|reverse}}

倒序并大写:{{name|reverse:true}}


varmyAppModule=angular.module("myApp",[]);
myAppModule.controller("myAppCtrl",["$scope",function($scope){
$scope.name="xuqiang";
}]);
myAppModule.filter("reverse",function(){
returnfunction(input,uppercase){


varout="";
for(vari=0;i
}
});

示例三：替换

{{welcome|replaceHello}}

{{welcome|replaceHello:3:5}}




varapp=angular.module("myApp",[]);
app.controller("myAppCtrl",["$scope",function($scope){
$scope.welcome="HelloAngularJs";
}]);
//自定义过滤器
app.filter('replaceHello',function(){
returnfunction(input,n1,n2){
console.log("input=="+input);
console.log("n1=="+n1);
console.log("n2=="+n2);
returninput.replace(/Hello/,'您好');
}
});

示例四：筛选

body{
font-size:12px;
}
ul{
list-style-type:none;
width:408px;
margin:0px;
padding:0px;
}
ulli{
float:left;
padding:5px0px;
}
ul.odd{
color:#0026ff;
}
ul.even{
color:#ff0000;
}
ul.bold{
font-weight:bold;
}
ullispan{
width:52px;
float:left;
padding:0px10px;
}
ul.focus{
background-color:#cccccc;
}






序号
姓名
性别
年龄
分数


{{$index+1}}
{{stu.name}}
{{stu.sex}}
{{stu.age}}
{{stu.score}}




vara3_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(){
returnfunction(e,type){
var_out=[];
var_sex=type?"男":"女";
for(vari=0;i22&&e[i].age<28&&
e[i].sex==_sex)
_out.push(e[i]);
}
return_out;
}
});

示例五：排序

body{
font-size:12px;
}
ul{
list-style-type:none;
width:408px;
margin:0px;
padding:0px;
}
ulli{
float:left;
padding:5px0px;
}
ul.bold{
font-weight:bold;
cursor:pointer;
}
ullispan{
width:52px;
float:left;
padding:0px10px;
}
ul.focus{
background-color:#cccccc;
}






序号

姓名


性别


年龄


分数




{{$index+1}}
{{stu.name}}
{{stu.sex}}
{{stu.age}}
{{stu.score}}




vara3_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}
];
}])

示例六：输入过滤

body{
font-size:12px;
}
ul{
list-style-type:none;
width:408px;
margin:0px;
padding:0px;
}
ulli{
float:left;
padding:5px0px;
}
ul.bold{
font-weight:bold;
cursor:pointer;
}
ullispan{
width:52px;
float:left;
padding:0px10px;
}
ul.focus{
background-color:#cccccc;
}









序号
姓名
性别
年龄
分数


{{$index+1}}
{{stu.name}}
{{stu.sex}}
{{stu.age}}
{{stu.score}}




vara3_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}
];
}])

参考：

【angularjs实战】

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

• 返回顶部
• 3162201930
• czq8825@qq.com