<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ng 也是通过script标签进行写入
var app = angular.module("myapp",[]);
app.controller("mycontrl",function ($scope){
//声明变量
$scope.price=120;
$scope.num=2;
$scope.teststr = "1234abcdABCD移动通信";
$scope.names=["张三","李四","李达","王五"];//基本类型的数组
$scope.persons=[{id:1,sex:"男",name:"张飞"},{id:3,sex:"男",name:"关羽"},{id:3,sex:"女",name:"貂蝉"},{id:2,sex:"女",name:"孙尚香"}];//对象类型的数组
$scope.orderFunc = function(obj) {
return obj;
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontrl">
<fieldset id="">
<legend>1.货币格式化:currency</legend>
<ul>
<li>请输入价格:<input type="text" ng-model="price"/></li>
<li>请输入数量:<input type="text" ng-model="num"/></li>
<li>商品总价:{{price*num|currency:"¥"}}----默认的样式{{price*num|currency}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>2.大小写的转换:大写(uppercase)/小写(lowercase)</legend>
<ul>
<li>请输入:<input type="text" ng-model="str1"/>转成大写:{{str1|uppercase}}</li>
<li>请输入:<input type="text" ng-model="str2"/>转成小写:{{str2|lowercase}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>3.日期格式化:date</legend>
<ul>
<li>选择日期:<input type="date" ng-model="mydate"/>格式化以后:{{mydate|date:"yyyy-MM-dd"}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>4.字符串截取:limitTo</legend>
<ul>
<li>按照前13位进行截取:{{teststr|limitTo:13}}</li>
<li>按照后13位进行截取:{{teststr|limitTo:-13}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>5.匹配:filter---主要针对数组</legend>
<p>5.1根据(自定义)内容进行匹配----基本类型的数组</p>
<input type="text" ng-model="testvalue" />
<p ng-repeat="s in names|filter:testvalue">{{s}}</p>
<p>5.2根据(数组里面的)属性进行匹配----对象类型的数组</p>
<input type="text" ng-model="testvalue2" />
<p ng-repeat="s in persons|filter:testvalue2">{{s.id+"---"+s.sex+"---"+s.name}}</p>
</fieldset>
<fieldset id="">
<legend>6.保留小数点位数:number(可以自动四舍五入)</legend>
<ul>
<li>请输入小数:<input type="text" ng-model="nums"/>保留小数点2位:{{nums|number:2}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>7.排序---orderBy</legend>
<p>7.1按指定属性进行排序--对象类型的数组----倒序排序:a.在指定元素的前面加上"-";b.在指定元素后面加上":true"</p>
<p ng-repeat="s in persons|orderBy:'id'">{{s.id+"***"+s.sex+"***"+s.name}}</p>
<p>7.2按照多个属性进行排序---对象类型的数组</p>
<p ng-repeat="s in persons|orderBy:['id','sex']">{{s.id+"***"+s.sex+"***"+s.name}}</p>
<p>7.3按照函数的返回值进行排序---基本类型的数组</p>
<p ng-repeat="s in names|orderBy:orderFunc():true">{{s}}</p>
</fieldset>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ng 也是通过script标签进行写入
var app = angular.module("myapp",[]);
app.controller("mycontrl",function ($scope){
//声明变量
$scope.price=120;
$scope.num=2;
$scope.teststr = "1234abcdABCD移动通信";
$scope.names=["张三","李四","李达","王五"];//基本类型的数组
$scope.persons=[{id:1,sex:"男",name:"张飞"},{id:3,sex:"男",name:"关羽"},{id:3,sex:"女",name:"貂蝉"},{id:2,sex:"女",name:"孙尚香"}];//对象类型的数组
$scope.orderFunc = function(obj) {
return obj;
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontrl">
<fieldset id="">
<legend>1.货币格式化:currency</legend>
<ul>
<li>请输入价格:<input type="text" ng-model="price"/></li>
<li>请输入数量:<input type="text" ng-model="num"/></li>
<li>商品总价:{{price*num|currency:"¥"}}----默认的样式{{price*num|currency}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>2.大小写的转换:大写(uppercase)/小写(lowercase)</legend>
<ul>
<li>请输入:<input type="text" ng-model="str1"/>转成大写:{{str1|uppercase}}</li>
<li>请输入:<input type="text" ng-model="str2"/>转成小写:{{str2|lowercase}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>3.日期格式化:date</legend>
<ul>
<li>选择日期:<input type="date" ng-model="mydate"/>格式化以后:{{mydate|date:"yyyy-MM-dd"}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>4.字符串截取:limitTo</legend>
<ul>
<li>按照前13位进行截取:{{teststr|limitTo:13}}</li>
<li>按照后13位进行截取:{{teststr|limitTo:-13}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>5.匹配:filter---主要针对数组</legend>
<p>5.1根据(自定义)内容进行匹配----基本类型的数组</p>
<input type="text" ng-model="testvalue" />
<p ng-repeat="s in names|filter:testvalue">{{s}}</p>
<p>5.2根据(数组里面的)属性进行匹配----对象类型的数组</p>
<input type="text" ng-model="testvalue2" />
<p ng-repeat="s in persons|filter:testvalue2">{{s.id+"---"+s.sex+"---"+s.name}}</p>
</fieldset>
<fieldset id="">
<legend>6.保留小数点位数:number(可以自动四舍五入)</legend>
<ul>
<li>请输入小数:<input type="text" ng-model="nums"/>保留小数点2位:{{nums|number:2}}</li>
</ul>
</fieldset>
<fieldset id="">
<legend>7.排序---orderBy</legend>
<p>7.1按指定属性进行排序--对象类型的数组----倒序排序:a.在指定元素的前面加上"-";b.在指定元素后面加上":true"</p>
<p ng-repeat="s in persons|orderBy:'id'">{{s.id+"***"+s.sex+"***"+s.name}}</p>
<p>7.2按照多个属性进行排序---对象类型的数组</p>
<p ng-repeat="s in persons|orderBy:['id','sex']">{{s.id+"***"+s.sex+"***"+s.name}}</p>
<p>7.3按照函数的返回值进行排序---基本类型的数组</p>
<p ng-repeat="s in names|orderBy:orderFunc():true">{{s}}</p>
</fieldset>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
