过滤器
- 过滤器用来格式化需要展示给用户的数据；
- 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器，比如希望字符串转换成大写，可以对字符串中的每个字符单独进行转换操作，也可以使用过滤器；
{{ name | uppercase }} - 以HTML的形式使用过滤器时，如果需要传递参数给过滤器，只需要在过滤器名字后面加冒号即可；如果有多个参数，可以在每个参数后面都加入冒号；
{{ 123.456789 | number:2 }} - 可以用|符号作为分割符来同时使用多个过滤器；
- 在JavaScript代码中可以通过$filter来调用过滤器，比如在代码中使用lowercase过滤器；
app.controller('DemoController',['$scope','$filter',function($scope, $filter) {
$scope.name = $filter('lowercase')('Cherry');
}]);Angular内置过滤器
- currency：将一个数值格式化为货币格式，currency过滤器允许我们自己设置货币符号，默认采用客户端所处地区的货币符号；
- date：将日期格式化成需要的格式，如果没有指定使用任何格式，默认会采用mediumDate格式；
- filter：从给定数组中选择一个子集，并将其生成一个新数组返回，通常用来过滤需要进行展示的元素；filter过滤器的第一个参数可以是：
～字符串：返回所有包含这个字符串的元素，如果想返回不包含该字符串的元素，在参数前加！符号；
～对象：AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串，如果我们希望对全部属性都进行比较，可以将$当作键名；
～函数：对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回；
～true：用angular.equals(expected, actual)对两个值进行严格比较；
～false：进行区分大小写的子字符串比较； - json：将一个JSON或JavaScript对象转换成字符串，这种转换对调试非常有帮助；
{{ {'name': 'Cherry': 'Shanghai'} | json}}
={ "name": "Cherry", "City": "Shanghai" } - limitTo：根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取；
{{ San Francisco is very cloudy | limitTo:3 }} >> San
{{ San Francisco is very cloudy | limitTo:-6 }} >> cloudy
{{ ['a','b','c','d','e','f'] | limitTo:1 }} >> "a" - lowercase：将字符串转为小写；
{{ San Francisco is very cloudy | lowercase }} >> san francisco is very cloudy - number：将数字格式化成文本，第二个参数是可选的，用来控制小数点后截取的位数；
{{ 123456789 | number }} >> 1,234,567,890
{{ 1.234567 | number:2 }} >> 1.23 - orderBy：可以用表达式对指定的数组进行排序；orderBy过滤器接受两个参数，第一个是必需的（用来确定数组排序方向的谓词），第二个是可选的：
～函数：当第一个参数是函数时，该函数会被当作待排序对象的getter方法；
～字符串：对这个字符串进行解析的结果将决定数组元素的排序方向，可以传入+或-来强制进行升序或降序排序；
～数组：在排序表达式中使用数组元素作为谓词； uppercase：将字符串转为大写；
自定义过滤器
创建自定义过滤器需要将它放到自己的模块中
//过滤器本质上是一个会把输入的内容当作参数传入进去的函数
angular.module('myApp.filters', [])
.filter('capitalize', function(){
return function(input) {
//input是传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
};
};
});{{'ginger lovers dog treats' | lowercase | capitalize}}
>> Ginger lovers dog treats表单验证
- 根据用户在表单中输入的内容给出实时视觉反馈是非常重要的；
- 表单验证不仅能给用户提供有用的反馈，同时也能保护Web应用不会被恶意或者错误的输入所破坏，Web前端要尽力保护后端；
- AngularJS提供了很多表单验证指令，要使用表单验证首先要有一个name属性，如果要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记：
<form name="form" novalidate>
<label name="email">Your email</label>
<input name="email" type="email" ng-model="email" placeholder="Email Address" />
</form>- input元素上使用的所有验证选项：
～必选项：验证某个表单输入是否已填写，在输入字段元素添加HTML5标记required即可，如：
<input type="text" required />
～最小长度：验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minlength=”{number}”，如：
<input type="text" ng-minlength="5" />
～最大长度：验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用ng-maxlength=”{number}“，如：
<input type="text" ng-maxlength="16" />
～模式匹配：使用ng-pattern=”/PATTERN/“来确保输入能够匹配指定的正则表达式，如：
<input type="text" ng-pattern="[a-zA-Z]" />
～电子邮件：验证输入内容是否为电子邮件，将input类型设置为email，如：
<input type="email" name="email" ng-model="user.email" />
～数字：验证输入的是否为数字，将input类型设置为number，如：
<input type="number" name="age" ng-model="user.age" />
～URL： 验证输入的是否为URL，将input类型设置为url，如：
<input type="url" name="homepage" ng-model="user.facebook_url" />
～自定义验证：
～在表单中控制变量：表单的属性可以在其所属的 scope对象中访问到，而我们又可以访问 scope对象，因此JavaScript可以间接地访问DOM中的表单属性；借助这些属性，可以对表单作出实时响应；主要有以下属性：（通过formName.inputFieldName.property格式访问这些属性）
1.未修改的表单： 用来判断用户是否修改了表单，未修改为true；
formName.inputFieldName.$pristine
2.修改过的表单 ：只要用户修改过表单，无论输入是否通过验证，都返回true；
formName.inputFieldName.$dirty
3.合法的表单：判断表单的内容是否合法，合法为true；
formName.inputFieldName.$valid
4.不合法的表单 ：判断表单的内容是否不合法，不合法为true；
formName.inputFieldName.$invalid
5.错误：$error对象，它包含当前表单的所有验证内容，以及它们是否合法的信息，如果验证失败为true，输入字段通过验证为false；
formName.inputFieldName.$error
～一些有用的CSS样式：
- AngularJS处理表单时，会根据表单当前的状态添加一些CSS类：
.ng-pristine { }
.ng-dirty { }
.ng-valid { }
.ng-error { } - $parsers：当用户同控制器进行交互，并且ngModelController中的setViewValue()方法被调用时，parsers数组中的函数会以流水线的形式被逐个调用，可以对输入值进行转换，或者通过setValidity()函数设置表单的合法性；使用parsers数组是实现自定义验证的途径之一；
- $formatters：当绑定的ngModel值发生了变化，并经过parsers数组中解析器的处理后，这个值会被传递给formatters流水线；formatters中的函数也可以修改并格式化这些值；这些函数通常用来处理视图中的可视变化；
- AngularJS处理表单时，会根据表单当前的状态添加一些CSS类：
组合实例,一个注册表单：
form.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Sign Up</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
<form name="signup_form" novalidateng-submit="signupForm()">
<fieldset>
<legend>Signup</legend>
<!-- Your name -->
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required />
<div class="error" ng-show="signup_form.name.$dirty $$ signup_form.name.$invalid">
<small class="error" ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error" ng-show="signup_form.name.$error.minlength">
Your name is required to be at leasr 3 characters.
</small>
<small class="error" ng-show="signup_form.name.$error.maxlength">
Your name cannot bu longer than 20 characters.
</small>
</div>
</div>
</div>
<!-- User Email -->
<div class="row">
<div class="large-12 columns">
<label>Your email</label>
<input type="email" placeholder="Email" name="email" ng-model="signup.email" ng-minlength="3" ng-maxlength="20" required />
<div class="error" ng-show="signup_form.email.$dirty $$ signup_form.email.$invalid">
<small class="error" ng-show="signup_form.email.$error.required">
Your email is required.
</small>
<small class="error" ng-show="signup_form.email.$error.minlength">
Your email is required to be at leasr 3 characters.
</small>
<small class="error" ng-show="signup_form.email.$error.email">
That is not a valid email. Please input a valid email.
</small>
<small class="error" ng-show="signup_form.email.$error.maxlength">
Your email cannot bu longer than 20 characters.
</small>
</div>
</div>
</div>
<!-- User name -->
<div class="row">
<div class="large-12 columns">
<label>Username</label>
<input type="text" placeholder="Desired username" name="username" ng-model="signup.username" ng-minlength="3" ng-maxlength="20" required />
<div class="error" ng-show="signup_form.username.$dirty $$ signup_form.username.$invalid">
<small class="error" ng-show="signup_form.username.$error.required">
Please input a username.
</small>
<small class="error" ng-show="signup_form.username.$error.minlength">
Your username is required to be at leasr 3 characters.
</small>
<small class="error" ng-show="signup_form.username.$error.maxlength">
Your username cannot bu longer than 20 characters.
</small>
<small class="error" ng-show="signup_form.username.$error.unique">
That username is taken, please try another.
</small>
</div>
</div>
</div>
<!--用ng-disabled指令基于表单的合法性来启用或禁用按钮-->
<button type="button" ng-disabled="signup_form.$invalid" class="button radius">Submit</button>
</fieldset>
</form>
<script type="text/javascript" src="form.js"></script>
</body>
</html>form.js
var app = angular.module('app', []);
app.directive('ensureUnique', function($http){
return {
require: 'ngModel',
link: function(scope, ele, attrs, c){
scope.$watch(attrs.ngModel, function(n){
if (!n) return;
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: {
field: attrs.ensureUnique,
value: scope.ngModel
}
}).success(function(data){
c.$setValidity('unique', data.isUnique);
}).error(function(data){
c.$setValidity('unique', false);
});
});
}
};
});有点不太好的用户体验，当用户还没有输入完，或者没有输入的时候，就会弹出错误信息，这让用户的心情会有点不爽！
568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
