11-angular 实例学习-2

一些重要的 demo

dropList

 <div ng-app="myApp" ng-controller="myCtrl" >
        <!-- 使用普通的方式 -->
        <select ng-model="adStyle"  ng-change="look();" >
            <option value="0">全部广告类型</option>
            <option value="1">图片广告</option>
            <option value="2">图音视广告</option>        
        </select> 
        <br>

        <!-- 使用 ng-repeat -->
        <select name="" id="" >
            <option value="" ng-repeat="x in repeat">{{ x }}</option>
        </select>
        <br>

        <!-- 使用 ng-options -->
        <select ng-model="formModel" ng-options="x for x in form1">
            <option>{{ x }}</option>
        </select>
        <br>

        <!-- options value 的使用 -->
        <!-- 我们需要将ID设为value值，shortName设为option标签之间的内容
    重点是：ng-options="item.channelId as item.shortName for item in channelList"这个写法-->
        <select ng-model="formData.channelId" ng-options="item.channelId as item.shortName for item in channelList">
            <option value="">全部渠道</option><!-- 替换空白-->
        </select>
        你选择的渠道对应的ID是:{{formData.channelId}}
    </div>
    <script src='https://cdn.bootcss.com/angular.js/1.6.8/angular.js'></script>
    <script>    
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.channelList=[
                {"channelId":1,"shortName":"张三"},
                {"channelId":2,"shortName":"李四"}
            ]
            $scope.formModel = '03';
            $scope.form1 = ['01','02','03'];
            $scope.form = formData = [
                {name : "张三", content : "我有病"},
                {name : "李四", content : "我有药"},
                {name : "王二", content : "我啥也没有"}
            ];
            $scope.repeat = ['1','2','3'];
            $scope.adStyle = "0";
            $scope.look = function(){          
                alert($scope.adStyle)
            }       
        });
    </script>
复制代码

filter 自建

// 我以一个将字符串折分成数组的过滤器举例。在页面上需要传两参数时，就在过滤器后面以冒号（:）隔开，如下面要传的分割器；在页面要实现传三个及以上的参数时，我们可以通过在过滤器后面继续加冒号（ :） 和参数的格式添加。总结就是，第一个参数是管道符号前面的数据，多个参数时，在过滤器名称后面以冒号隔开。
        
        var app = angular.module('myApp', []);
    //控制器
        app.controller('myCtrl', function($scope, $filter) {
            $scope.data ="abc,mn,大山,绿水";
            $scope.data2 ="abc;mn;大山;绿水";//需要给定分割器

        });

        app.filter('toArray',function(){
            return function(data,separator){
                if(data){
                    // separator ? separator = separator :separator =  ',';
                    separator = separator || ',';
                    console.log(separator);
                    
                    return data.split(separator);
                }else{
                    return [];
                }
            }
        })

        //在过滤器注入服务
        app.service('hexafy', function() {
            this.myFunc = function (x) {
                return x.toString(16);
            }
        });
        
        //过滤器
        app.filter('myFormat',['hexafy', function(hexafy) {
            return function(x) {
                return hexafy.myFunc(x);
            };
        }]);

        //将字符串分割成数组
        // app.filter("toArray",function(){
        //         return function(data,separator){
        //             if(data){
        //                 if(!separator) {
        //                     separator = ",";//默认逗号分割
        //                 }
        //             return data.split(separator);
        //             }else{
        //                 return [];//得到的结果类型始终为数组类型              }
        //             }
        //         }
        // });
    </script>
复制代码

checkForm 表单验证

<!-- 为啥什么是非form表单？因为基本上都是通$http服务异步发送与接收数据，没有form表单个一样可以。更何况，form表单的提交校验在哪里都可以搜索得到，我这个是通过自己总结出来滴。 -->
<div ng-app="myApp" ng-controller="myCtrl">
    名字：<input ng-model="name">
        <span ng-if="checkData.nameCheck=='m'">不能为空</span>
        <span ng-if="checkData.nameCheck=='e'">最少两个字</span><br/>
    电话：<input ng-model="phone">
        <span ng-if="checkData.phoneCheck=='m'">手机号</span>
        <span ng-if="checkData.phoneCheck=='e'">格式错误</span><br/>

    <button ng-click="submit()">提交</button>
</div>
<script src='https://cdn.bootcss.com/angular.js/1.6.8/angular.js'></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        //存校验数据滴,给定默认值
        $scope.checkData ={
            "nameCheck":"m",
            "phoneCheck":"m"
        };

        //提交时校验数据:二选一
        $scope.submit = function(){        
            //1.这种会一个一个校验的
            if($scope.checkName() &&  $scope.checkPhone()){
                alert("数据都符合，可以与后台交互数据了")
            }
            //2.这种会一起校验完的
            var nameFlag = $scope.checkName();
            var phoneFlag = $scope.checkPhone();
            if(nameFlag && phoneFlag){
                alert("数据都符合，可以与后台交互数据了")
            }
        };
        //注：如果校验的内容大同小异，可合并成一个校验的方法，我就不写了。
        //校验名字
        $scope.checkName = function(){
            if($scope.name){
                if($scope.name.length<2){
                    $scope.checkData.nameCheck = "e";
                    return false;
                }else{
                    //...进行某些正确的操作，如显示正确图片
                    $scope.checkData.nameCheck = "r";
                    return true;
                }               
            }else{
                $scope.checkData.nameCheck = "m";
                return false;
            }
        };

        //校验电话
        $scope.checkPhone = function(){
            var phone = $scope.phone;
            if(phone){
                var reg = /^1(3|4|5|6|7|8)\d{9}$/;//手机号正则
                if(reg.test(phone)){
                    $scope.checkData.phoneCheck = "r";//正确
                }else{
                    $scope.checkData.phoneCheck = "e";//格式错误
                }
            }else{
                $scope.checkData.phoneCheck = "m";
                return true;//可以为空
            }
        };
    });
</script>
复制代码

checkbox 多选

<div ng-app="myApp" ng-controller="myCtrl">
        选择
        <div ng-repeat="item in list">
            <input type="checkbox" name="tagName" value="item.id" ng-click="select(item.id,$event)"> {{item.shortName}}
        </div>
        结果：{{result}}
    </div>

    <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtrl', function($scope) {
        //创建checkbox用的
        $scope.list=[{"id":1,"shortName":"张三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}];
        //存储已选
        $scope.result = [];
        //触发事件
        $scope.select = function(id,event){            
            console.log(event)//打印看看这是什么，有利于理解
            console.log(action)

            var action = event.target;
            if(action.checked){//选中，就添加
                if($scope.result.indexOf(id) == -1){//不存在就添加
                    $scope.result.push(id);
                }
            }else{//去除就删除result里
                var idx = $scope.result.indexOf(id);
                if( idx != -1){//不存在就添加
                    $scope.result.splice(idx,1);
                }
            }
        };
    });
    </script>
复制代码

inputFocus and blur 使用

 <div ng-app="myApp" ng-controller="control">
        <input type="text" set-Focus ng-blur="setBlur()">
        <button ng-click="getFocus()">要取 focus</button>
    </div>  
    <script src='https://cdn.bootcss.com/angular.js/1.6.8/angular.js'></script>
    <script type="text/javascript">     
        //模型
        var app = angular.module('myApp',[]);

        app.controller('control',function($scope){
            $scope.isCome = false; //判断是否电击
            $scope.isFocus = false; //判断是否 focus
        
            $scope.getFocus = function(){
                $scope.isCome = true;
                $scope.isFocus = true;
            }

            $scope.setBlur = function(){
                $scope.isFocus = false;
            }
        })
        
        app.directive('setFocus',[function(){
            return {
                //为了隔离父级 隔离 scope 设为 false
                scope: false,
                
                //link函数主要用于操作dom元素,给dom元素绑定事件和监听.
                link:function(scope,element,attr,ctrl,linker){
                    //scope:指令所在的作用域
                    //element：指令元素的封装，可以调用angular封装的简装jq方法和属性
                    //attr：指令元素的属性的集合
                    //ctrl：用于调用其他指令的方法,指令之间的互相通信使用，需要配合require
                    //linker:用于transClude里面嵌入的内容

                    
                    scope.$watch('isFocus',function(newValue,oldValue,scope){
                        // $watch(F,M,B)
                        // F 为监听的数据 'isFocus'
                        // M 当数据发生变化的时候，调用 M 
                            // M 新数据 和 老数据 和 作用域
                        // B 为true时：将会检查监听对象的每个属性是否发生变化。适用于监听数组或者监听的是一个对象上的所有属性。由于每次都要遍历监听对象的值是否发生变化，如果数组值过多，或对象属性多，那么一点点改变就会造成大量的遍历。
                        if(newValue && scope.isCome){
                            element[0].focus();
                            // 获取焦点
                            alert("获取焦点");
                        }
                    },true);
                }
            
        }
        }])


        //控制器
        // app.controller("control",function($scope){
        //     $scope.isCome = false;     //判断大圣来了没
        //     $scope.isFocus = false;        //判断是不是要取芭蕉扇

        //     $scope.getFocus = function(){
        //         $scope.isFocus = true; //大圣来了
        //         $scope.isCome = true;  //要取芭蕉扇
        //     };

        //     $scope.setBlur = function(){
        //         $scope.isFocus = false;//没人要来取芭蕉扇了
        //     }
        // });

        // //自定义指令
        //  app.directive('setFocus',[ function(){
        //      return {
        //          scope:false,
        //          link:function(scope, element){                     
        //              scope.$watch("isFocus",function(newValue,oldValue, scope) {
        //                  //大圣来了，且要取芭蕉扇
        //                  if(newValue && scope.isCome){
        //                      element[0].focus(); //获取焦点
        //                      alert("猴哥，老牛不在家，我一介女子还不是你说什么我就照做，可你进入人家的身体也不打声招呼，进了就进了，还搞得我那么难受，求你别搞了，给，芭~~~蕉~~~扇！")
        //                  }
        //             }, true);;
        //          }
        //      };
        // }]);

    </script>
复制代码