angularjs实现混合多选（纯angularjs）

最新推荐文章于 2024-04-27 05:36:48 发布

五年丶

最新推荐文章于 2024-04-27 05:36:48 发布

阅读量853

点赞数

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

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

版权

工作任务专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需求还是同上一篇一样。
从这个网站上得到了灵感，相当于是重新设计，然后写了一遍程序。
网站：http://damoqiongqiu.iteye.com/blog/1917971 实例6
自己所写的基于这个例子得以实现：
让我想想原理，我面前所认为，核心思想就是：由于键值对是一一对应的，key,value之间有着关联，点击时候，先得到json的key,然后跟着去匹配他的value,然后下拉栏显示：
自己所写的源程序如下：
html:

<!DOCTYPE html>
<html ng-app="expanderModule">
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/angular-csp.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <title>angularJs实现</title>
</head>
<body ng-controller='SomeController' >

<accordion>
    <expander ng-repeat="expander in expanders" expander-title='expander.title' expander-text="expanders[0].text" expanders="expanders" index="{{$index}}">
        <div>{{$index+1}}</div>   {{expander.text}}
    </expander>
</accordion>
<button ng-click="addRow()">点击添加一行</button>
</body>
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
</html>

index.js:

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        template : '<div ng-transclude></div>',
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});

expModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        require : '^?accordion',
        scope : {
            title : '=expanderTitle',
            text:'=expanderText',
            index:'@',
            expanders:'='
        },
        template : '<div>'
            + '<div class="tab" ng-click="toggle();stopProp($event)">' +
            '<div class="item" ng-click="moveToSrc($index,index);stopProp($event)" ng-repeat="item in title">{{item.name}}</div></div>'
            + '<div class="body" stopProp($event)" ng-show="showMe">' +
                '<div class="item" ng-click="moveToTr($index,index)" ng-repeat="item in text">{{item.name}}</div></div>'
            + '</div>',
        link : function(scope, element, attrs, accordionController) {
            scope.showMe = false;

            scope.stopProp = function(e){
                e.stopPropagation();
            };
            accordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accordionController.gotOpened(scope);
            }
            scope.moveToSrc = function($index,index) {//第几个和行
                var item = this.item;
                scope.expanders[0].text.push(scope.expanders[index].title[$index]);
                scope.expanders[index].title.splice($index,1);

            };
            scope.moveToTr = function($index,index) {//第几个和行
                var item = this.item;
//                console.log(scope.expanders[0].text[$index]);//undefined

                scope.expanders[index].title.push(item);//?
                scope.expanders[0].text.splice($index,1);
            };
        }

    }
});

expModule.controller("SomeController",function($scope) {
    $scope.trCounter = 0;


    $scope.expanders = [{
        title : [{id:1,name:'大宝'},{id:2,name:'ketty'},{id:3,name:'麻二'}],
        text:[{id:4,name:'韦春花'},{id:5,name:'茅十八'},{id:6,name:'金轮法王'}]
    }, {
        title : [{id:7,name:'小宝'},{id:8,name:'鳌拜'},{id:9,name:'陈浩南'}],
        text : []
    }, {
        title : [{id:10,name:'陈近南'},{id:11,name:'乾隆'},{id:12,name:'双儿'}],
        text : []
    }];

    $scope.addRow = function(){
        $scope.itemTemplate={               //默认显示数据 主要是用来控制行数；
            title:[],
            text:[]
            };
        $scope.expanders.push($scope.itemTemplate);
    }
});

index.css:
.expander {
border: 1px solid black;
width: 250px;
}

.expander>.title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}

.expander>.body {
padding: .1em .3em;
}
.table{
width: 600px;
height: 300px;
margin:auto;
padding: 10px;
border-radius:6px;
border:1px solid #ccc;
margin-top: 100px;
}

.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: 70px;
height: 25px;
color:#000;
display:flex;
justify-content: center;
align-items: center;
border:1px solid #ccc;
background-color: #f8f8f8;
margin-right: 10px;
}

th{
height: 30px;
text-align: center;
align-items: center;
}
td{
height: 50px;
text-align: center;
}

五年丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs实现混合多选（纯angularjs）

需求还是同上一篇一样。从这个网站上得到了灵感，相当于是重新设计，然后写了一遍程序。网站：http://damoqiongqiu.iteye.com/blog/1917971 实例6 自己所写的基于这个例子得以实现：让我想想原理，我面前所认为，核心思想就是：由于键值对是一一对应的，key,value之间有着关联，点击时候，先得到json的key,然后跟着去匹配他的value,然后下拉栏显
复制链接

扫一扫