Articles tagged with: directive

directive做过滤器要人性化很多，但是如果是简单的过滤也可以使用filter来做，设置一个全局变量保存数据验证结果，等到提交表单的时候验证全局变量就可以了：

.directive("myFilter",function(){
    var css = {
        _valid:function(ele){
            ele.removeClass("ng-invalid");
            ele.next().removeClass("hide");
            ele.next().removeClass("input_remove");
            ele.next().removeClass("glyphicon-remove");

            ele.addClass("ng-valid");
            ele.next().addClass("input_ok");
            ele.next().addClass("glyphicon-ok");
        },
        _invalid:function(ele){
            ele.removeClass("ng-valid");
            ele.next().removeClass("input_ok");
            ele.next().removeClass("glyphicon-ok");

            ele.addClass("ng-invalid");
            ele.next().addClass("input_remove");
            ele.next().addClass("glyphicon-remove");
        }
    };
    return {
        require:'ngModel',
        link:function(scope,ele,arrts){
            scope.$watch(arrts.ngModel,function(newVal,oldVal){
                if(typeof newVal != "undefined"){
                    css._valid(ele);
                    if(typeof arrts.type != "undefined"){
                        switch (arrts.type){
                            case 'text':
                                if(typeof newVal != "string"){
                                    css._invalid(ele);
                                }

                                if(typeof arrts.min != "undefined"){
                                    if(newVal.length < arrts.min){
                                        css._invalid(ele);
                                    }
                                }

                                if(typeof arrts.max != "undefined"){
                                    if(newVal.length > arrts.max){
                                        css._invalid(ele);
                                    }
                                }
                                break;
                            case 'number2':
                                var filter  = /^[0-9]+.?[0-9]*$/;
                                if(!filter.test(newVal)){
                                    css._invalid(ele);
                                }

                                if(typeof arrts.min != "undefined"){
                                    if(newVal < parseInt(arrts.min)){

                                        css._invalid(ele);
                                    }
                                }

                                if(typeof arrts.max != "undefined"){
                                    if(newVal > parseInt(arrts.max)){
                                        css._invalid(ele);
                                    }
                                }
                                break;
                            case 'email2':
                                var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                                if(!filter.test(newVal)){
                                    css._invalid(ele);
                                }
                                break;
                        }
                    }
                }


            });
        }

    };
})
.filter('email2',function(){
    //感觉这个不人性化,也可能是我不会用吧
    return function(input,length){
        if(typeof input == "undefined" || length < input.length){
            //c("输入不合规");
        }
        return input;
    }
})

下面是style的代码:

input.ng-invalid {
    border: 1px solid red;
}
input.ng-valid {
    border: 1px solid green;
}
.input_ok{
    position: absolute;
    z-index: 100;
    right: 1%;
    top: 8px;
    color: #299429;
}
.input_remove{
    position: absolute;
    z-index: 100;
    right: 1%;
    top: 8px;
    color: #ff0000;
}
.form-contant p{
    position: relative;
}

下面是表单html的代码:

<div class="form-contant">
    <h1>Register</h1>
    <p>
        <input type="text" ng-model="user_name" placeholder="请输入用户名" class="form-control" my-filter data="{{user_name|email2:4}}" min="4" max="20">
        <i class="glyphicon glyphicon-ok hide"></i>
    </p>
    <p>
        <input type="text" ng-model="user_pwd" placeholder="请输入密码" class="form-control" my-filter min="4" max="20">
        <i class="glyphicon glyphicon-ok hide"></i>
    </p>
    <p>
        <input type="number2" ng-model="age" placeholder="请输入年龄" class="form-control" my-filter min="4" max="102">
        <i class="glyphicon glyphicon-ok hide"></i>
    </p>
    <p>
        <input type="email2" ng-model="email" placeholder="请输入邮箱" class="form-control" value="" my-filter  min="6" max="50">
        <i class="glyphicon glyphicon-ok hide"></i>
    </p>


    <br>
    <button type="button" class="form-control" ng-click="get()">get</button>
    <button type="button" class="form-control" ng-click="save()">save</button>
    <button type="button" class="form-control" ng-click="put()">put</button>
</div>