要实现的功能如下：
该弹窗中包括的功能：打开（弹出）、搜索，复选、删除、清空、保存、撤销（关闭）
该指令需要的参数：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); };
暂无评论内容