angulary4

来源：互联网发布：互力微信淘客软件编辑：程序博客网时间：2024/05/01 08:00

标签指令： 主要用在表单验证当中
<a> 在ng-controller内部和外部的不一样
<select>
     -ng-options 跟select标签指令配合使用，类似ng-repeat 循环。配合ng-model使用.动态添加数据
         -for in
<textarea>
<input>
<form>
    -novalidate 组织系统设置的默认效果或者可以自定义效果

$scope.colors = [
{ name : 'red' },
{ name : 'yellow' },
{ name : 'blue' }
];
<div ng-controller="Aaa" ng-app="myapp1">  
      <a href="http://blog.163.com/qyl_anikin/blog/">标签指令</a>{{myColor.name}} 
      <select ng-options="color.name for color in colors" ng-model="myColor"></select>
      <form novalidate>  //  阻止了h5自己的验证
        <input type="email">
        <input type="submit" value="sub">
      </form>
</div>
    <a href="http://blog.163.com/qyl_anikin/blog/">标签指令</a>  // 有默认的行为

//color.name for color in colors //先执行后面红色，color表示的是每一行之后再color.name for 找到每一个

标签指令区别于原始的标签：就是可以自动生成，而不是一开始就写死；还可以进行循环或者其他操作

angularJs的表单验证
$valid 是否有效，有效true
$invalid 无效为true
$pristine 是否是初始值，是的话为true
$dirty 是否修改了初始值就，修改过就为true
$error 验证失败或者通过的时候的所有验证信息
注意：
通过 name 的方式进行查找输入框
必须配合ng-model来使用

 <form novalidate name="myForm">
         <input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
         <p>valid-{{myForm.myText.$valid}}</p>  
         <p>invalid-{{myForm.myText.$invalid}}</p>
         <p>pristine-{{myForm.myText.$pristine}}</p>
         <p>dirty-{{myForm.myText.$dirty}}</p>
         <p>error:{{myForm.myText.$error}}</p>
       </form>

一般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(){ 
             
           }
      }]);
</script>
</head>
<body>
<div ng-controller="Aaa" class="wrap" id="wrap">  
      <form novalidate name="nForm" id="myform"  method="post">
      <div>
        <label>用户名:</label>
            <input type="text" name="nText" required ng-pattern="/^[a-zA-Z]+$/" ng-maxlength="8" ng-model="regText.name" ng-blur="change('regText',nForm.nText.$error)">
            <p ng-repeat=" re in regText.regList|filter:regText.regVal " ng-bind-template="* {{re.tips}}" id="passed"></p>
        </div>
        <div>
        <label>密 &nbsp;&nbsp;码:</label>
            <input type="password" name="nPassword" required ng-minlength = "6" ng-model="regPassword.name" ng-blur="change('regPassword',nForm.nPassword.$error) " ng-paste="true">
            <p ng-repeat=" re in regPassword.regList|filter:regPassword.regVal" ng-bind-template="* {{re.tips}}"></p>
        </div>
        <div>
          <input type="submit" value="登录"  />
          <input type="reset" value="重置" />
        </div>

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:字符串拼接可以在后面加上：‘\’;

1 0