AngularJS权威指南-过滤器

177178次阅读
没有评论

共计 11549 个字符,预计需要花费 29 分钟才能阅读完成。

1.过滤器(filter)

过滤器用来格式化需要展现给用户的数据。在HTML中的模板绑定符号{{}}内通过|符号来调用过滤器。语法{{name | uppercase}}

1.1内置过滤器

  1. currency:它可以将一个数值格式化为货币格式。{{ 100 | currency }}
    默认情况下会采用客户端所处地区的货币符号,也可以自定义货币符号。
  2. 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 ->
  3. 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:进行不区分大小写的子字符串比较。
    函数:运行这个函数,如果返回真值就接受这个元素。

  4. JSON:它可以将一个JSON或JS对象转换成字符串
    <p>json:{{ {'name':'Jam','age':'22'} | json }}</p>
  5. 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>
  6. lowercase:它将字符串转为小写
    <p>lowercase:{{ 'San Francisco is Vary Cloudy' | lowercase }}</p>
  7. uppercase:它将字符串转为大写
    <p>uppercase:{{ 'San Francisco is Vary Cloudy' | uppercase }}</p>
  8. number:它将数字格式化成文本。它第二个参数是可选
    <p>number:{{ 1234567890 | number }}</p>
    <p>number:{{ 12.34567890 | number:2 }}</p>
  9. 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{}

  1. $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>
  2. $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;
                    });
                })
            }
        }
    }])

正文完
 0
Chou Neil
版权声明:本站原创文章,由 Chou Neil 于2015-09-16发表,共计11549字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。