过滤器(Filter):过滤器的主要用途就是一个格式化数据的小工具,一般用于服务端存储的数据转换为用户界面可以理解的数据
常见需要使用Filter的数据有:时间 1288323623006
date 过滤器:
主要用于时间格式的转换:
<span>{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}</span>
limitto 过滤器:
limitto过滤器用于限制一个字符串或数组展示的长度:
<ul class="messages">
<li ng-repeat="item in messages | limitTo:-2">
{{item.content | limitTo:2 }}
</li>
</ul>
filter 过滤器:filter过滤器会根据设置的检索数据过滤未匹配到的数据内容也可以通过设置检索条件为一个对象,实现在指定属性中检索
<ul class="messages">
<li ng-repeat="item in messages | filter:{content:123}">
{{item.content}}
</li>
</ul>
filter 过滤器 – 自定义比较:
通过自定义一个比较函数,在前台为filter指定第二个参数实现:
<ul class="numbers">
<li ng-repeat="item in numbers | filter:1:comparator">
{{ item }}
</li>
</ul>
// js代码
$scope.comparator = function (source,target) {
return source > target;
};
json 过滤器:可以将一个对象以json形式解析利用它我们可以在界面上直观的查看一些对象的成员,是调试的好办法
自定义过滤器:自定义过滤器实现自定义数据格式转换
angular.module('MyAppFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
Form 表单:form表单元素在AngularJS中也是一个指令,具备表单解析、格式化、校验等功能,依赖于H5的智能表单
Form 表单 – 验证:AngularJS允许在表单中使用H5的一些校验属性,同时会根据校验条件的规则作出相应的数据变化
注意:在使用验证时先取消浏览器本身自带的验证(给表单添加novalidate属性)
Form 表单 – 验证规则:必填项 required or ng-required
最小长度 minlength or ng-minlength
最大长度 maxlength
类型 type(number、email)
等等