要实现的功能如下：
弹框
该弹窗中包括的功能：打开（弹出）、搜索，复选、删除、清空、保存、取消（关闭）
该指令需要的参数：1. 数据ID数组：idList
2. 数据Name数组：nameList
3. 基础数据：objList
代码如下：
app.directive('popupmultiselect', function () {
// 再次打开弹框时反显选中项
function obj2data(obj,data){
var text = "-"+obj.join("-")+"-";
text = text.replace(/-[0-9]+,/g,"-");
for( var i=0,l=data.length;i<l;i++){
data[i]['check'] = ( text.indexOf( "-"+data[i].id+"-" ) > -1 );
}
}
// 保存时：构建选中项ID数组
function data2obj(obj,data){
obj.length = 0;
for( var i=0,l=data.length;i<l;i++){
if( data[i]['check'] ){
obj.push( data[i]['id'] );
}
}
}
// 保存时：构建选中项Name数组
function data2objs(obj,data){
obj.length = 0;
for( var i=0,l=data.length;i<l;i++){
if( data[i]['check'] ){
obj.push( data[i]['name'] );
}
}
}
return {
restrict: 'E',
replace: true,
template:'<div><button type="button" class="btn btn-info" ng-click="open()"><i class="glyphicon glyphicon-plus"></i> 请选择（打开弹框时触发的按钮）</button>'+
'<div class="modal fade" ng-class="{h:\'\',f: \'inn\', s: \'inn in\'}[panelshow]">'+
'<div class="modal-dialog"><div class="modal-content">'+
'<div class="modal-header">'+
'<h4 class="col-md-7">选择设备品牌</h4>'+
'<div class="col-md-5">'+
'<label>已选</label>'+
'<button type="button" class="btn" ng-click="clearAll()">清空</button>'+
'</div>'+
'</div>'+
'<div class="modal-body">'+
'<div class="col-md-7">'+
'<form class="form-inline">'+
' <div class="form-group">'+
' <input class="form-control" style="width:150px;" placeholder="请输入设备品牌" ng-model="searchVal" />'+
' </div>'+
' <div class="form-group">'+
' <button ng-click="brandSearch()" class="btn btn-red">搜索</button>'+
' </div>'+
'</form>'+
'<div class="table-responsive">'+
'<table class="table">'+
'<thead>'+
'<tr>'+
'<th style="width:7%;">'+
'<input type="checkbox" ng-model="allCheck" ng-click="allCheckFn()" />'+
'</th>'+
'<th style="width:50%;">设备品牌</th>'+
'</tr>'+
'</thead>'+
'<tbody>'+
'<tr ng-if="filterData.length==0">'+
'<td colspan="99"><center>无数据</center></td>'+
'</tr>'+
'<tr ng-repeat="(k,v) in filterData">'+
'<td>'+
'<input type="checkbox" ng-model="v.check" ng-click="itemCheck()"/>'+
'</td>'+
'<td>{{v.name}}</td>'+
'</tr>'+
'</tbody>'+
'</table>'+
'</div>'+
'</div>'+
'<div class="col-md-5">'+
'<div ng-repeat="(k,v) in datas">'+
'<div class="dialog-r-o" ng-if="v.check"><button type="button" ng-click="itemCheck(v)"><i class="glyphicon glyphicon-remove"></i></button>{{v.name}}</div>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="modal-footer">'+
'<button type="button" class="btn btn-grey" ng-click="close()">取消</button>'+
'<button type="button" class="btn btn-red" ng-click="save()">保存</button>'+
'</div>'+
'</div></div>'+
'</div></div>',
link: function(scope, element, attrs) {
scope.allCheck = false // 全选变量
scope.searchVal = '' // 输入的搜索条件
scope.datas = []; // 接收到的基础数据
scope.filterData = []; // 根据查询条件过滤后的基础数据
scope.panelshow = 'h'; // 初始化弹框隐藏/展示变量，h为隐藏，s为展示
scope.brandSearch = function(){ // 搜索按钮触发的事件函数
if(scope.searchVal){
scope.filterData = scope.datas.filter(item=>{if(item.name.indexOf(scope.searchVal)!=-1) {return item}})
}else{
scope.filterData = scope.datas
}
};
scope.open = function(){ // 打开弹框事件函数
scope.datas = angular.copy( scope.objData); // 深copy下基础数据
obj2data(scope.getMyObj,scope.datas) // 反显下已选中的状态
scope.itemCheck() // 重置下全选的状态
scope.brandSearch() // 根据查询条件过滤下数据
setTimeout(function() { scope.$apply(function() { scope.panelshow = 's'; }); }, 200);
};
scope.close = function(){ // 关闭弹框事件函数
scope.panelshow = 'f';
setTimeout(function() { scope.$apply(function() { scope.panelshow = 'h'; }); }, 200);
};
scope.allCheckFn = function(){ // 切换全选事件函数
if(scope.allCheck){
scope.datas = scope.datas.map(item=>{item.check = true;return item})
}else{
scope.datas = scope.datas.map(item=>{item.check = false;return item})
}
};
scope.clearAll = function(){ // 清空事件函数
scope.allCheck = false
scope.allCheckFn()
};
scope.itemCheck = function(v){ // 单选事件函数
if(v && v.name){
v.check = false;
}
const flag = scope.datas.some(item=>!item.check)
scope.allCheck = !flag
};
scope.save = function(){
data2obj(scope.idList,scope.datas);
data2objs(scope.nameList,scope.datas);
scope.close();
};
},
scope: { idList: '=',nameList: '=',objData: '=' }
}
});
使用指令：<popupmultiselect id-list="brand_ids" name-list="brand_names" obj-data="brand_data"></popupmultiselect>
指令外的选中项删除：
$scope.brand_detele = function(k){ $scope.brand_ids.splice(k,1);$scope.brand_names.splice(k,1); };
网友评论