angular基础知识简介3：指令-过滤器-验证

ng-include指令可以加载外部html片段（注意本地跨域问题）

表示当前组件可以加载外部的html片段（公共资源）

解决谷歌浏览器本地跨域右键选择快捷方式-》目标 --disable-web-security --user-data-dir

过滤器 {{list.state | statleFilter}} | statleFilter过滤器名称

（满足对应的条件以另外一种方式展示出来）

内置过滤器（和vue差不多）

大量使用过滤器对性能有影响，慎用

var todoApp=angular.module("App",[])//声明 App:模块名称 []表示依赖列表
todoApp.controller("todoCtrl",function($rootScope,$scope,$filter){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法.如果在控制器需要使用过滤器需要先引入filter
$scope.name=$filter('lowercase')('lili')//变成小写
$scope.name=$filter('uppercase')('lili')//变成大写
$scope.obj={
    msg:'hello'，
    num:1236554.21135，
    date:new Date(),
    arr:['arr','ben','assa','asdd','ssad','qww'],
    lists:[{msg:'assda',type:'1'},
    {msg:'assd1a',type:'2'},
    {msg:'ass233da',type:'3'},
    {msg:'ass12da',type:'1'},
]
}   
 })
//如果在控制器外使用，当前模块内使用，所有的控制器都可以被使用
//自定义过滤器
todoApp.filter('statleFilter',function(){
return function(text){
case true;
 	return "已采购"；
case false;
 	return "未采购"；
default;
 	return "未采购"；
}
})
todoApp.filter('statleMes',function(){
return function(text){
case 1;
 	return "启动"；
case 2;
 	return "离线"；
case 3;
 	return "连接"；
case 4;
 	return "发送"；
default;
 	return "启动"；
}
})
todoApp.filter('statleFla',function(){
    return function(text,param){
if(text===""){
    return "-"
}
if(text.length>=param){
    var s=text.substr(0,param)
    return s+'...';
}else{
    return text;
}
}
})
<body ng-controller="todoCtrl">
        <div >
            <h1></h1>
            <div >{{name}}</div>
            <div >{{obj.msg| uppercase}}</div>//uppercase为ng自带的过滤器
            <div >{{obj.num| number:2}}</div>//保留两位小数，表示参数
            <div >{{obj.date| date:'yyyy-MM-dd hh24-mm-ss'}}</div>
            <div >{{obj.arr| filter:'a' }}</div>//如果当前有’a‘的显示
        <div >
            <ul>
                <li ng-repeat="list in obj.lists">{{list.type | statleMes}}</li>
                <li ng-repeat="list in obj.lists">{{list.msg| statleFla:5}}</li>
            </ul>
        <div>
            <div >{{obj.msg| statleFilter}}</div>
            <div ng-include="hello.html''">
                比如头部和底部都是公共文件，都是公用的
            </div>
        </div>
    </body>

验证

//$dirty 表单有填写记录，(只要修改过无论是否通过验证都返回true)
//$pristine 表单没有填写记录（未修改的表单，未修改为true,修改过的为false）        
//$valid字段内容合法（表单合法为true）
//$invalid 字段内容是非法(表单不合法为true)   
//$error 当前表示所有验证内容是否合法，验证失败为true,如果值为false表示通过了验证 
var todoApp=angular.module("App",[])//声明 App:模块名称 []表示依赖列表
            todoApp.controller("todoCtrl",function($rootScope,$scope,$filter){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法.如果在控制器需要使用过滤器需要先引入filter
               $scope.formData={}
          $scope.submit=function(){
            $http({
                method:"post",
                url:"",
                data:$scop.formData
            }).then(function(res){
                console.log(res)
        }).catch(function(error){
                console.log(error)
        })
       }
    })
<body ng-controller="todoCtrl">
        <div >
            <form name="myform">
            <p>用户名：</p>
            <input type="text" name="user1" ng-model="formData.user" required></input>//必填项
            <label ng-show="myform.user1.$dirty && myform.user1.$invalid">//被修改过而且不合法时显示
            <p style="color:red"  ng-show="myform.user1.$error.required"></p>
            </label>
            <p>邮箱：</p>
        <input type="text" name="email" ng-model="formData.user" required></input>//必填项
        <label ng-show="myform.email.$dirty && myform.email.$invalid">//被修改过而且不合法时显示
            <p style="color:red"  ng-show="myform.email.$error.required">邮箱是必须的</p>
            <p style="color:red"  ng-show="myform.email.$error.$email">邮箱是错误的</p>
        </label>
            <p>
                <input type="submit" ng-click="submit()" ng-disabled="myform.$error.required || myform.$dirty && myform.$invalid"/>
            </p>
        </form>
         </div>
    </body>

angular基础知识简介3：指令-过滤器-验证

猜你喜欢