AngularJS权威指南-过滤器
1.过滤器(filter)
过滤器用来格式化需要展现给用户的数据。在HTML中的模板绑定符号{{}}内通过|符号来调用过滤器。语法{{name | uppercase}}
1.1内置过滤器
- currency:它可以将一个数值格式化为货币格式。{{ 100 | currency }}
默认情况下会采用客户端所处地区的货币符号，也可以自定义货币符号。 - date:它可以将日期格式化成需要的格式。本地化的日期格式：
{{today | date:'medium'}} <!- Aug 09,2015 12:09:02 PM -> {{today | date:'short'}} <!- 8/9/1512:09PM -> {{today | date:'fullDate'}} <!- Thursday,August 09,2015 -> {{today | date:'longDate'}} <!- August 09,2015 -> {{today | date:'mediumDate'}} <!- Aug 09,2015 -> {{today | date:'shortDate'}} <!- 8/9/15 -> {{today | date:'mediumTime'}} <!- 12:09:02 PM -> {{today | date:'shortTime'}} <!- 12:09 PM ->年份格式化
{{today | date:'yyyy'}} <!- 2015 -> {{today | date:'yy'}} <!- 15 -> {{today | date:'y'}} <!- 2015 ->月份格式化
{{today | date:'MMMM'}} <!- August -> {{today | date:'MMM'}} <!- Aug -> {{today | date:'MM'}} <!- 08 -> {{today | date:'M'}} <!- 8 ->日期格式化
{{today | date:'dd'}} <!- 09 -> {{today | date:'d'}} <!- 9 -> {{today | date:'EEEE'}} <!- Thursday -> {{today | date:'EEE'}} <!- Thu ->小时格式化
{{today | date:'HH'}} <!- 00 -> {{today | date:'H'}} <!- 0 -> {{today | date:'hh'}} <!- 12 -> {{today | date:'h'}} <!- 12 ->分钟格式化
{{today | date:'mm'}} <!- 09 -> {{today | date:'m'}} <!- 9 ->秒数格式化
{{today | date:'ss'}} <!- 02 -> {{today | date:'s'}} <!- 2 -> {{today | date:'.sss'}} <!- .975 ->字符格式化
{{today | date:'a'}} <!- AM -> {{today | date:'Z'}} <!- 0700 ->自定义日期格式
{{today | date:'EEEE,d,M'}} <!- Thursday,9,8 -> - filter:它可以从给定数组中选择一个子集，并将其生成一个新的数组返回，它接受两个参数。第一个参数
字符串：返回所有包含这个字符串的元素
对象：AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串。
函数：对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。<div ng-controller="myfilter"> <p>字符串:{{ ['Ari','likes','to','ng'] | filter:'e' }}</p> <p>对象:{{ [{'name':'Jam','age':'22'},{'name':'Jay','age':'26'}] | filter:{'name':'Jay'} }}</p> <p>函数:{{ ['Ari','likes','to','ng'] | filter:isCap }}</p> </div><script> var app = angular.module("myApp", []); app.controller("myfilter", function ($scope) { $scope.isCap = function (str) { return str[0] == str[0].toUpperCase(); } }); </script>第二个参数
true：用angular.equals(expected,actual)对两个值进行严格比较。
false：进行不区分大小写的子字符串比较。
函数：运行这个函数，如果返回真值就接受这个元素。 - JSON：它可以将一个JSON或JS对象转换成字符串
<p>json:{{ {'name':'Jam','age':'22'} | json }}</p> - limitTo:它会根据传入的参数生成一个新的数组或字符串，新的数组会字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是后面截取。
<p>limitTo:{{ 'San Francisco is Vary Cloudy' | limitTo:3 }}</p> <p>limitTo:{{ 'San Francisco is Vary Cloudy' | limitTo:-6 }}</p> <p>limitTo:{{ ['a','b','c','d'] | limitTo:1 }}</p> - lowercase:它将字符串转为小写
<p>lowercase:{{ 'San Francisco is Vary Cloudy' | lowercase }}</p> - uppercase:它将字符串转为大写
<p>uppercase:{{ 'San Francisco is Vary Cloudy' | uppercase }}</p> - number：它将数字格式化成文本。它第二个参数是可选
<p>number:{{ 1234567890 | number }}</p> <p>number:{{ 12.34567890 | number:2 }}</p> - orderBy：它可以用表达式对指定的数组进行排序它接受两个参数。第一个参数必须的，第二个是可选的。
第一个参数
a.函数：当第一个参数是函数时，该函数会被当作待排序对象的getter方法。
b.字符串：对于这个字符串进行解析的结果将决定数组元素的排序方向。我们可以传入+或-来强制进行升序或降序排列。
c.数组：在排序表达式中使用数组元素作为谓词，对于与表达式结果并不严格相等的每一个元素，则使用第一个谓词。
第二个参数：用来控制排序方向（是否逆向）<p>orderBy:{{ [{'name':'Azz','age':'111'},{'name':'Qyy','age':'222'},{'name':'Nll','age':'333'}] | orderBy:'name' }}</p> <p>orderBy:{{ [{'name':'Azz','age':'111'},{'name':'Qyy','age':'222'},{'name':'Nll','age':'333'}] | orderBy:'name':true }}</p>
1.2自定义过滤器
- 创建自定义过滤器需要将它放到自己的模块中。过滤器本质上是一个会把我们输入的内容当作参数传入进去的函数。
<p>{{ 'ginger loves dog treats' | lowercase | capitalize }}</p> <script> var app = angular.module("filter", []) app.filter('capitalize', function () { return function (input) { if (input) { return input[0].toUpperCase() + input.slice(1); } } }) </script>
1.3表单验证
1.3.1内置验证
- 必填项required：<input type="text" required/>
- 最小长度ng-minlength：<input type="text" ng-minlength="5"/>
- 最大长度ng-maxlength：<input type="text" ng-maxlength="15"/>
- 匹配模式ng-pattern：<input type="text" ng-pattern="[a-zA-Z]"/>
- 电子邮件：<input type="email" name="email" ng-model="user.email"/>
- 数字：<input type="number" name="age" ng-model="user.age"/>
- URL：<input type="url" name="homepage" ng-model="user.facebook_url"/>
See the Pen zvrVRP by iTattoo (@ZhouYanlang) on CodePen.
1.3.2自定义验证
**留在指令中说明
1.3.3在表单中控制变量
表单的属性可以在其所属的$scope对象中访问到，而我们又可以访问$scope对象，因此JS可以间接地访问DOM的表单属性。
- 未修改过的表单：这是一个布尔属性，用来判断用户是否修改了表单。如果为修改，值为true，如果修改过值为false。
formName.inputFieldName.$pristine
- 修改过的表单：只要用户修改过表单，无论输入是否通过验证，该值都返回true。
formName.inputFieldName.$dirty
- 合法的表单：这个布尔型的属性用来判断表单的内容是否合法，如果合法，这值为true。
formName.inputFieldName.$valid
- 不合法的表单：这个布尔型的属性用来判断表单的内容是否不合法，如果不合法，这值为true。
formName.inputFieldName.$invalid
- 错误：$error对象；它包含当前表单的所有验证内容，以及它们合法的信息。如果验证失败，值为true；如果验证通过，值为false。
formName.inputFieldName.$error
1.4CSS样式
先写样式，它们分别对应表单输入字段的特定状态。
.ng-pristine{}
.ng-dirty{}
.ng-valid{}
.ng-invalid{}
- $parsers
当用户通控制器进行交互，并且ngModelController中的$setViewValue()方法被调用时，$parsers数组中的函数会以流水线的形式被逐个调用，第一个$parsers被调用后，
执行结果会传递给第二个$parsers，以此类推。
这些函数可以输入值进行转换，或者通过$setValidity()函数设置表单的合法性。每一个$parsers返回的值都会传入下一个$parsers中，当不希望数据模型发生更新时返回undefined。<script> angular.module("filter").directive('oneToTen', function () { return { require: '?ngModel', link: function (scope, ele, attrs, ngModel) { if (!ngModel)return; ngModel.$parsers.unshift(function (viewValue) { var i = parseInt(viewValue); if (i >= 0 && i < 10) { ngModel.$setValidity('oneToTen', true); return viewValue; } else { ngModel.$setValidity('oneToTen', false); return undefined; } }) } } }) </script> - $formatters
当绑定的ngModel值发生变化，并经过$parsers数组中解析器的处理后，这个值会被传递给$formatters流水线。同$parsers数组可以修改表单的合法性状态类似，$formatters中函数
也可以修改并格式化这些值。比起单纯的验证目的，这些函数更常用来处理视图中的可视变化。<script> angular.module("filter").directive('oneToTen', function () { return { require: '?ngModel', link: function (scope, ele, attrs, ngModel) { if (!ngModel)return; ngModel.$parsers.unshift(function (viewValue) { ngModel.$formatters.unshift(function (v) { return $filter('number')(v); }); }) } } }) </script>
1.5组合实例
- 先引入样式
<link rel="stylesheet" href="../css/bootstrap.min.css"/> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/angular.1.2.13.min.js"></script> <style> .error { color: red; } input { width: 100%; } </style> - 第1种，当用户输入完时提醒
<form action="#" class="container" name="signup_form" novalidateng-submit="signupForm()"> <fieldset> <legend>Signup</legend> <div class="row"> <div class="col-lg-12 columns"> <label>Your Name</label><br/> <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required/> <div 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 least 3 characters </small> <small class="error" ng-show="signup_form.name.$error.maxlength"> Your name is cannot be longer 20 than characters </small> </div> </div> </div> <div class="row"> <div class="col-lg-4"> <label>Your Email</label><br/> <input type="email" placeholder="email" name="email" ng-model="signup.email" ng-minlength="3" ng-maxlength="20" required/> <div ng-show="signup_form.email.$dirty && signup_form.email.$invalid"> <small class="error" ng-show="signup_form.email.$error.email"> This is not a valid email.Please input a valid email </small> <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 least 3 characters </small> <small class="error" ng-show="signup_form.email.$error.maxlength"> Your email is cannot be longer 20 than characters </small> </div> </div> <div class="col-lg-4"> <label>Username</label><br/> <input type="text" placeholder="Desired username" name="username" ng-model="signup.username" ng-minlength="3" ng-maxlength="20" ensure-unique="username" required/> <div 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 least 3 characters </small> <small class="error" ng-show="signup_form.username.$error.maxlength"> Your username is cannot be longer 20 than characters </small> <small class="error" ng-show="signup_form.username.$error.unique"> That username is taken.Please try another </small> </div> </div> <div class="col-lg-4"> <label>Submit</label><br/> <button type="submit" class="button radius" ng-disabled="signup_form.$invalid">Submit</button> </div> </div> </fieldset> </form>var app = angular.module("myApp", []); app.directive('ensureUnipue', 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.ensureUnipue, data: { field: attrs.ensureUnipue, value: scope.ngModel } }).success(function (data) { c.$setValidity('unique', data.isUnique); }).error(function (data) { c.$setValidity('unique', false); }) }) } } }) - 第2种，提交后显示验证信息
<form action="#" class="container" name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController"> <fieldset> <legend>Signup</legend> <!--提交后显示验证信息--> <div class="row"> <div class="col-lg-8"> <label>Your Name(提交后显示验证信息)</label><br/> <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required/> <div ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted"> <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 least 3 characters </small> <small class="error" ng-show="signup_form.name.$error.maxlength"> Your name is cannot be longer 20 than characters </small> </div> </div> <div class="col-lg-4"> <label>Submit</label><br/> <button type="submit" class="button radius" ng-disabled="signup_form.$invalid">Submit</button> </div> </div> </fieldset> </form>var app = angular.module("myApp", []); 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); }) }) } } }) //提交后显示验证信息 app.controller('signupController', function ($scope) { $scope.submitted = false; $scope.signupForm = function () { if ($scope.signup_form.$valid) { //正常提交 alert("success!"); } else { $scope.signup_form.submitted = true; } } }) - 第3种，在失焦点后显示验证信息
.ng-focused { background-color: #00af00; }<form class="container"> <fieldset> <legend>Signup</legend> <!--在失焦点后显示验证信息--> <div class="row"> <div class="col-lg-8"> <label>Your Name(在失焦点后显示验证信息)</label><br/> <input type="text" ng-class="{error:signup_form.name.$dirty && signup_form.name.$invalid}" placeholder="Name" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required ng-focus/> <div ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.$focused"> <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 least 3 characters </small> <small class="error" ng-show="signup_form.name.$error.maxlength"> Your name is cannot be longer 20 than characters </small> </div> </div> <div class="col-lg-4"> <label>Submit</label><br/> <button type="submit" class="button radius" ng-disabled="signup_form.$invalid">Submit</button> </div> </div> </fieldset> </form>var app = angular.module("myApp", []); 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); }) }) } } }) //在失焦点后显示验证信息 app.directive('ngFocus', [function () { var FOCUS_CLASS = "ng-focused" return { restrict: "A", require: 'ngModel', link: function (scope, element, attrs, ctrl) { ctrl.$focused = false; element.bind('focus', function (evt) { element.addClass(FOCUS_CLASS); scope.$apply(function () { ctrl.$focused = true; }); }).bind('blur', function (evt) { element.removeClass(FOCUS_CLASS); scope.$apply(function () { ctrl.$focused = false; }); }) } } }])
