angularjs實現混合多選（純angularjs）
需求還是同上一篇一樣。
從這個網站上得到了靈感，相當於是重新設計，然後寫了一遍程式。
網站：http://damoqiongqiu.iteye.com/blog/1917971 例項6
自己所寫的基於這個例子得以實現：
讓我想想原理，我面前所認為，核心思想就是：由於鍵值對是一一對應的，key,value之間有著關聯，點選時候，先得到json的key,然後跟著去匹配他的value,然後下拉欄顯示：
自己所寫的源程式如下：
html:
<!DOCTYPE html>
<html ng-app="expanderModule">
<head lang="en" 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;
}