<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("uppercaseController",["$scope",function($scope){
$scope.person = {
"Name":"Da Hua Xi You 2","age":"15"
}
}]);
app.controller("lowercaseController","age":"15"
}
}]);
app.controller("costController",function($scope){ //货币的显示
$scope.quantity = 1;
$scope.price = 9.99;
});
app.controller('namesController',function($scope){
$scope.names = [
{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}
];
$scope.jsonText={foo:"bar",baz:23};
});
app.controller('namesFilterController',country:'Denmark'}
];
});
</script>
</head>
<body ng-app="myApp">
<!-- 向表达式添加过滤器：可以通过一个管道字符(|)和一个过滤器添加到表达式中-->
<!-- 字符串转化为大小写 -->
<div ng-controller="uppercaseController">
<p>转化为大写:{{person.Name | uppercase}}</p>
</div>
<div ng-controller="lowercaseController">
<p>转化为小写:{{person.Name | lowercase}}</p>
</div>
<div ng-controller="costController">
数量：<input type="number" ng-model="quantity" min="1" step="0.01"> <!-- step是控制小数的位数 0.01代表两位小数 0.001代表三位小数 min控制最小的位数-->
价格：<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
{{250 |currency:"RMB ￥"}}
</div>
<div ng-controller="namesController">
<ul>
<li ng-repeat="x in names | orderBy:'country'"> <!-- orderBy 排序 -->
{{x.name + "," + x.country}}
</li>
</ul>
{{jsonText | json}} <br /> <!--json格式过滤 -->
{{13215615646 | date:'yyyy-MM-dd HH:mm:ss'}} <br /> <!-- date格式过滤 -->
{{"Da Hua Xi You 2" | limitTo:6}} <br /> <!--取出前6个元素 -->
{{"Da Hua Xi You 2" | limitTo:-6}}<br /> <!--取出后6个元素 -->
<!--对象排序：降序-->
{{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}<br/>
<!--对象排序：升序-->
{{ [{"age": 20,"name": "test abc"}
] | orderBy:'id' }}
</div>
<p>按输入的字母显示对象：</p>
<div ng-controller="namesFilterController">
<p>输入过滤：</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country':true">
{{ (x.name | uppercase) + ',' + x.country }}
</li>
</ul>
<p>name筛选：</p>
<ul>
<li ng-repeat="x in names | filter:{'name':name} | orderBy:'country':true">
{{ (x.name | uppercase) + ',' + x.country }}
</li>
</ul>
{{ [{"age": 20,"name": "sunm"},"name": "test abc"}
] | filter:{'name':'sunm'} }}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
/*
在控制器中使用过滤器
*/
var app = angular.module("myApp",[]);
app.controller("myControl",function($filter,$scope){
var date = $filter('date')(new Date()); //不指定格式
$filter('date')(new Date(),'fullDate');
date = $filter('date')(new Date(),"yyyy-MM-dd"); //指定格式的日期初始化
$scope.dates =[
{"id":1,"add":"Baidu.com","title":"百度"},{"id":2,"add":"Ali.com","title":"阿里"},{"id":3,"add":"WangYi.com","title":"网易"}
];
var dates = $filter('orderBy')($scope.dates,'id',true); //在过滤器中的排序 true代表降序 false代表升序 也可以不加
// alert($scope.dates);
for(var i=0;i<dates.length;i++){
// alert("id:" + dates[i].id + "add:" + dates[i].add + "title:" + dates[i].title);
}
//$scope.cPrice=$filter('currency')(123,'RMB ￥');
// alert($filter('uppercase')("sdsgdgdf"));
});
</script>
</head>
<body ng-app="myApp" ng-controller="myControl">
</body>
</html>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div>
<input type="text" ng-model="name" ng-change="changeVal()" placeholder="请输入">
<ul>
<li>{{array | myFilter}}</li>
</ul>
</div>
</body>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myController',function($scope,$rootScope){
/**
* 自定义了一个数据源数组
* @type {*[]}
*/
$scope.array = [
{'name':'aaa'},{'name':'bbb'},{'name':'ccc'},{'name':'ddd'},{'name':'eee'},{'name':'fff'},{'name':'ggg'},{'name':'hhh'}
];
/**
* 初始化输入框为空
*/
// iuput里的值
$scope.name = '';
$scope.changeVal = function(){
//将本地作用域的值赋给全局作用域
$rootScope.name = $scope.name;
}
});
//自定义过滤器
app.filter('myFilter',function($rootScope){
/**
* 这里的obj参数，就是需要过滤的数组
*/
return function(obj){
//创建一个新的数组为空
var objArray = [];
angular.forEach(obj,function(data){
console.log(data);
if (data.name == $rootScope.name){
objArray.push(data.name);
}
});
return objArray.toString();
}
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.filter("replaceHello",function(){
return function(input,n1,n2){ //分别代表|后面的三个参数 分割用:
console.log(input);
console.log(n1);
console.log(n2);
return input.replace(/Hello/,"您好");
}
});
</script>
</head>
<body ng-app="myApp">
{{"Hello AngularJs" | replaceHello}}
<!--{{"Hello AngularJs" | replaceHello:3:5}}-->
</body>
</html> 原文链接：https://www.f2er.com/angularjs/146540.html