angularjs实现混合多选（jquery用以辅助）

最新推荐文章于 2021-02-06 12:53:03 发布

五年丶

最新推荐文章于 2021-02-06 12:53:03 发布

阅读量4k

点赞数

分类专栏：工作任务文章标签： angularjs dom

本文链接：https://blog.csdn.net/dengboz0910/article/details/53100226

版权

工作任务专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该项目要求
值得注意的几个地方：
1.指令directive中的scope拥有独立的作用域，每一个template也是拥有自己的作用域，不和其他的相互影响，这样一来就简化了工作；
2.当没有id时候，如何在指定DOM添加属性，比如id,display…
运用：

$(element).find('.hideMenu').attr('id', 'multi-act');

通过$（element）来通过class来找到该DOM。
3.阻止事件冒泡（作用：其他的click事件并不影响自身）
实现代码如下：

scope.stopProp = function(e){
        e.stopPropagation();
    };

4.在HTML中，可以向directive传值：

<td ng-click="stopProp($event)">
   <my-ctrl src="srcData" default="defaultData" index="{{$index}}"></my-ctrl>
</td>

源程序：
html:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/angular-csp.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <title>angular-js实现</title>
</head>

<body ng-controller="multi">

<div>
    <table class="table">
        <th id="xuHao">序号</th>
        <th id="items">具体项目</th>
        <tr ng-repeat="item in defaultData">      <!--控制行数-->
            <td style="align-items:center">{{$index+1}}<div ng-show="false">{{a = $index}}</div></td>
            <td ng-click="stopProp($event)">
                <my-ctrl src="srcData" default="defaultData" index="{{$index}}"></my-ctrl>
            </td>
        </tr>
    </table>
    <div class="bottom"><button ng-click="add()">添加一行</button></div>
</div>


<script src="js/angular.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery-1.8.0.js"></script>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
//    $(function(){
//        $(".bottom").click(function(event){
//            var e=window.event || event;
//            if(e.stopPropagation){
//                e.stopPropagation();
//            }else{
//                e.cancelBubble = true;
//            }
//            $(".hideMenu").show();
//        });
//        $(".table").click(function(event){
//            var e = window.event || event;
//            if(e.stopPropagation){
//                e.stopPropagation();
//            }else{
//                e.cancelBubble = true;
//            }
//        });
//
//        document.onclick = function(){
//            $(".hideMenu").hide();
//        };
//    })

</script>
</body>
</html>

index.js:

var app = angular.module('myApp',[]);

//声明filterController
app.controller('multi', function ($scope,$http) {


    $scope.trCounter = 0;

    //数据源
    $http.get("json/Data.json")
        .success(function (response) {
            $scope.srcData = response;

        });
    //默认数据
    $http.get("json/default.json")
        .success(function(response){
            $scope.defaultData = response;
        });

    //添加一行
    $scope.add=function(){

        $scope.itemTemplate={               //默认显示数据 主要是用来控制行数；
            "id": $scope.trCounter,         //初始值为0；
            "selected": []                  //符合上面的格式   [{"id":'',"selected":[]}];
        };

        $scope.trCounter+=1;                //相当于是id+1；
        $scope.defaultData.push($scope.itemTemplate);

    };

    //阻止事件冒泡
    $scope.stopProp = function(e){
        e.stopPropagation();
    };



});


app.directive('myCtrl',function(){
    return {
        restrict:'EA',
        scope:{             //隔离的作用域  所以必须要用指令才能完成
            index:'@',
            src:'=',
            default:'='
        },
        transclude:true,
        template:
            '<div ng-click="stopProp($event)">' +
            '<div>'+
            '<div class="tab" ng-click="toggle();flag()" >'+
                    '<div class="item" ng-repeat="item in default[index].selected" ng-click="stopProp($event);moveToSrc($index,index)">{{item.name}}</div>'+
            '<div class="arrow">▼</div>'+
            '</div>'+
            '<div  class="hideMenu" id="multi-act-hide">'+
                '<div class="item" ng-repeat="srcItem in src" ng-click="stopProp($event);moveToTr($index,index)">{{srcItem.name}}</div>'+
            '</div>'+
            '</div>' +
            '</div>',
        link: function (scope, element, attrs, ctrl) {   //临编译前的修改
            //默认不显示下拉菜单
            $(element).find('.hideMenu').attr('id', 'multi-act-hide')
            scope.stopProp = function(e){
                e.stopPropagation();
            };

            //点击弹出或收起下拉菜单
            scope.toggle = function() {
                scope.showMe =! scope.showMe;
            };

            scope.moveToSrc = function($index,index) {
                var item = this.item;//被点击的按钮
                scope.src.push(item);
                scope.default[index].selected.splice($index,1);

            };
            scope.moveToTr = function($index,index) {
                scope.default[index].selected.push(scope.src[$index]);
                scope.src.splice($index,1);
            }

            scope.flag = function(){
                    $('#multi-act').removeAttr('id');
                    $(element).find('.hideMenu').attr('id', 'multi-act');
                    $(element).find('.tab').attr('id', 'toggle');
                }

            //失去焦点后关闭弹出菜单 实现
            document.onclick=function(){
                $('#multi-act').removeAttr('id');
            }

        }
}
});

index.css:
.table{
    width: 600px;
    height: 300px;
    margin:auto;
    padding: 10px;
    border-radius:6px;
    border:1px solid #ccc;
    margin-top: 100px;
}
h2{
    align-items: center;
    justify-content: center;
    display:flex;
}
.tab{
    width: 600px;
    height: 30px;
    border-radius:2px;
    color:#000;
    display:flex;
    justify-content: center;
    align-items: center;
    border:1px solid #ccc;
    background-color: #f8f8f8;
    margin-right: 10px;
    padding: 2px;
    margin-top: 10px;
    position:relative;
}
.bottom{
    position:absolute;
    right: 250px;
    top: 450px;
}
.item{
    border-radius:2px;
    float: left;
    width: 50px;
    height: 20px;
    color:#000;
    display:flex;
    justify-content: center;
    align-items: center;
    border:1px solid #ccc;
    background-color: #f8f8f8;
    margin-right: 10px;
}
.arrow{
    position:absolute;
    right: 15px;
    top: 8px;
}
th{
    height: 30px;
    text-align: center;
    align-items: center;
}
td{
    height: 50px;
    text-align: center;
}
#multi-act
    display: block;
}
.hideMenu{
    display: none;
}

程序到此结束：）

五年丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs实现混合多选（jquery用以辅助）

值得注意的几个地方： 1.指令directive中的scope拥有独立的作用域，每一个template也是拥有自己的作用域，不和其他的相互影响，这样一来就简化了工作； 2.当没有id时候，如何在指定DOM添加属性，比如id,display… 运用： $(element).find('.hideMenu').attr('id', 'multi-act');通过$（element）来通过cl
复制链接

扫一扫