共计 11549 个字符,预计需要花费 29 分钟才能阅读完成。
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; }); }) } } }])
正文完
发表至: Angular.js
2015-09-16