过滤器：
- 过滤器中的
|json，可以使原来的json数据输出时按照换行的样式 - 过滤器
| limitTo:2可以截取字符串或者数组的前2位 - 过滤器
| orderBy可以进行排序，加入json里的key，就会根据这个key来排序，再加入一个参数true，就能逆排序
除了在标签里或者model里用过滤器，还可以在写JS或者JQ的区域通过
给controller注入$filter来直接在控制器里直接使用过滤器
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('cont1',['$scope','$filter',function($scope,$filter){
$scope.name = $filter('uppercase')('hello'); //将hello全部转成大写
$scope.number = $filter('number')('12392.8374',1); //限制一位小数
}]);
</script>
</head>
<body ng-controller="cont1">
{{name}}
{{number}}
</body>
我们也可以通过模块对象下的filter()方法，自定义一个过滤器
var app = angular.module('myApp',[]);
app.filter('firstUpper',function(){ //在app模块下调用filter方法来自定义过滤器，名字是firstUpper
return function(str，num){
return str.charAt(0).toUpperCase()+str.substring(1);
}
//这里的str，其实就是被使用过滤器的那个元素，这个过滤器的功能是将字符串的第一个字母大写
//另外，除了str，还可以传第二个参数，其实就是过滤器里用：隔开的第二个参数，当然，还可以加第三个或者更多
});
app.controller('cont1',['$scope',function($scope){
$scope.name = 'hello';
}]);
</script>
</head>
<body ng-controller="cont1">
{{name|firstUpper}}
</body>
同样，自定义的过滤器也可以直接在controller里的js中通过服务的方式调用，接着上面的例子
app.controller('cont1',['$scope','$filter',function($scope,$filter){
$scope.name = $filter('firstUpper')('hello'); //在controller中使用自定义的过滤器
}]);
- 下面这个例子是通过
ng-repeat和使用自带的过滤器来控制一个表格里的数据
var app = angular.module('myApp',[]);
app.controller('cont1',['$scope','$filter',function($scope,$filter){
$scope.data = [
{'name':'Victor','age':33},
{'name':'Mary','age':30},
{'name':'Qinyu','age':4},
{'name':'Yushuang','age':58},
{'name':'Yongpin','age':62}
];
$scope.onOff = true; //定义一个scope下的变量，来实现正序和反序的切换
$scope.myOrder = function(str){
if ($scope.onOff) {
$scope.data = //使用angular自带的orderBy过滤器， $filter('orderBy')($scope.data,str,true);
}else{
$scope.data = $filter('orderBy')($scope.data,str);
}
$scope.onOff = !$scope.onOff;
};
}]);
</script>
</head>
<body ng-controller="cont1">
<table border="1">
<thead>
<tr>
<th ng-click="myOrder('name')">姓名</th> <!--点击这个表头标题，可以调用myOrder函数来排序，当然，可以根据传参的不同来根据不同关键字排序-->
<th ng-click="myOrder('age')">年龄</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
下面这个例子是在上面的基础上增加一个搜索功能，用到的技能有
- 通过将原始数据保留，model的数据被赋值原始数据，这样筛选filter后的数据不会改变原始数据
- 过滤器中filter方法的使用
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('cont1',['$scope','$filter',function($scope,$filter){
$scope.oriData = [ //这是原始数据，不要在使用filter方法时去改变它
{'name':'Victor','age':33},
{'name':'Mary','age':30},
{'name':'Qinyu','age':4},
{'name':'Yushuang','age':58},
{'name':'Yongpin','age':62}
];
$scope.data = $scope.oriData; //可以在这里将原始数据赋值给model数据data
//这里添加筛选功能，使用filter这个方法，第一个参数放要从哪个数据源中筛选，第二个参数写的是根据哪个关键字
$scope.mySearch = function(){
$scope.data = $filter('filter')($scope.oriData,$scope.searchContent);
};
}]);
</script>
</head>
<body ng-controller="cont1">
<!--这里要给输入框添加ng-model要写搜索的关键字-->
<input type="text" ng-model="searchContent"><button ng-click="mySearch()">搜索</button>
<table border="1">
......
......