angulary4

标签指令: 主要用在表单验证当中
  标签指令{{myColor.name}}

// 阻止了h5自己的验证




标签指令 // 有默认的行为

// color.name for color in colors //先执行后面红色,color表示的是每一行 之后再color.name for 找到每一个 标签指令区别于原始的标签:就是可以自动生成,而不是一开始就写死;还可以进行循环或者其他操作
angularJs的表单验证
  $valid       是否有效,有效true
  $invalid    无效为true
  $pristine   是否是初始值,是的话为true
  $dirty        是否修改了初始值就,修改过就为true
  $error       验证失败或者通过的时候的所有验证信息
注意
    通过 name  的方式进行查找输入框
    必须配合ng-model来使用



valid-{{myForm.myText.$valid}}


invalid-{{myForm.myText.$invalid}}


pristine-{{myForm.myText.$pristine}}


dirty-{{myForm.myText.$dirty}}


error:{{myForm.myText.$error}}


一般h5的所有type都是支持的
type [ email  number  url ....]
required
ng-minlength
ng-maxlength
ng-pattern
 
class 这些css可以根据实际项目添加合适的样式
.ng-valid{}
.ng-invalid{}
.ng-pristine{}
.ng-dirty{}
实例
实战中的表单验证方式


$scope.regText = {
regVal : 'default',
regList : [
{ name : 'default' , tips : '请输入用户名'},
{ name : 'required' , tips : '用户名不能为空'},
{ name : 'pattern' , tips : '用户名必须是字母不能是数字'},
{ name : 'maxlength' , tips : '用户名最多不能超过8个字节'},
{ name : 'pass' , tips : '√'}
]
};

$scope.regPassword = {
regVal : 'default',
regList : [
{ name : 'default' , tips : '请输入密码'},
{ name : 'required' , tips : '密码不能为空'},
{ name : 'minlength' , tips : '密码至少6位'},
{ name : 'pass' , tips : '√'}
]
};
$scope.change = function(res,arg){
//required=true, pattern=false 有一个便不成立
for(var attr in arg){ // attr = required
if(arg[attr] == true){
$scope[res].regVal = attr;
return;
}
}
$scope[res].regVal = 'pass';
}
$scope.sub = function(){

}
}]);



















angularJs的自定义指令
angular.module
  controller
  run
  filter
  directive  名字只要是驼峰的形式的话,那么开头是my-app形式的
    restrict的四种定义方式  指定指令的类型  ng-name/重新html一些标签a input form /属性指令
            E:标签指令 
            A:属性指令 
            C:class  //少用
            M:注释   //少用
            AECM:即是属性,又是方法
            注释写法: 后面有空格.要写replace,希望模板替换注释
    replace:true  模板替换标签 //模板可替换,将原来的标签替换掉.  注释只能在替换的时候起作用
    template 配置选项添加功能; 模板代码
    templateUrl :自定义的模板代码比较多的情况下,写比较不方便。指定的是一个外部模板的页面
         
 tip:字符串拼接可以在后面加上:‘\’;


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部