突然要维护前辈们的项目,angularJs 写的以前没有用过,在此记录一下
1,首先是 html 弹窗页面
<div class="ngdialog-title">{{ngDialogData.title}}</div>
<div class="ngdialog-message" bindonce>
<div class="select-group-user-container">
<div class="left">
<div class="left-list" ng-class="{'active': imageClassify == 'personal'}" ng-click="selectImageClassify('personal')">个人库</div>
<div class="left-list" ng-class="{'active': imageClassify == 'system'}" ng-click="selectImageClassify('system')">系统库</div>
</div>
<div class="right">
<div class="img-concent" ng-show="selectImageList.length > 0">
<div class="concent-div" ng-repeat="(key, imgfile) in selectImageList track by key" ng-if="['jpg', 'png', 'jpeg', 'gif', 'bmp'].indexOf(imgfile.obj_type) > -1">
<img src="{{imgfile.url}}"
class="img-style"
alt="加载中...">
<div class="img-select" ng-click="selectImg(imgfile)">
<img ng-if="pageImageSrc == imgfile.url" src="/static/img/bdp-ok.png" class="img-select-svg"/>
</div>
<div class="img-name" title="{{imgfile.obj_name}}">{{imgfile.obj_name}}</div>
</div>
</div>
<div class="nodata" ng-show="!isSelectImageList && selectImageList.length === 0">
暂无数据
</div>
<div class="nodata" ng-show="!isSelectImageList && getImageListParam.page === selectImageListPagesCount && selectImageList.length > 30">
没有更多了
</div>
</div>
</div>
</div>
<div class="ngdialog-buttons" bindonce>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="selectImageOk()" bo-text="'ok' | translate" ></button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog()" bo-text="'cancel' | translate" ></button>
</div>
2,点击按钮 执行打开弹窗函数
// 前序 代码 directive() 中需要引入 ngDialog
// 图片素材列表
$scope.selectImageList = [];
// 素材资源请求参数
$scope.getImageListParam = {
postfix : "jpg,png,jpeg,gif,bmp",
page: 1, // 第一页
page_size: 31
// is_system: 1
}
// 图片列表 总页数
$scope.selectImageListPagesCount = 0;
// -----------------------------------------------------------
$scope.selectImage = function() {
$scope.isSelectImageList = false;
$scope.imageClassify = 'personal';
// 默认加载第一页
$scope.getImageListParam.page = 1
// 默认加载个人库
delete $scope.getImageListParam.is_system;
$scope.isSelectImageList = true;
// 调用业务接口
commonService.dsh_design.getMaterialList($scope.getImageListParam).then(res => {
$scope.isSelectImageList = false;
if (res.data.status == "0") {
$scope.selectImageList = res.data.result.data_list;
$scope.selectImageListPagesCount = res.data.result.pages_count;
//--- 打开选择框代码 start
$scope.selectImageDialog = ngDialog.open({
template: '/static/dashboard/adv-page/select-image.html',
className: 'ngdialog-theme-default ngDialog-width-950 ngDialog-select-image-dialog',
scope: $scope,
data: {
title: '选择图片'
}
});
} else {
errHint(res.data.errstr);
}
}).finally(() => {
$scope.isSelectImageList = false;
})
// ------- 打开选择框代码 end
};
3,窗口样式 css
.ngDialog-select-image-dialog {
.apply-all-user {
text-align: right;
line-height: 32px;
}
.select-group-user-container {
position: relative;
height: 600px;
overflow: hidden;
.left {
float: left;
width: 100px;
height: 100%;
overflow: auto;
padding: 8px 0;
font-size: 14px;
.left-list {
height: 32px;
line-height: 32px;
padding-left: 16px;
display: flex;
align-items: center;
cursor: pointer;
.list-title {
display: block;
max-width: 108px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-name-flex {
display: flex;
align-items: center;
}
}
.padding-left-24 {
padding-left: 24px;
justify-content: space-between;
}
.active {
// background-color: @theme($bgDialogHoverList);
background-color: @theme($bgNgdialogBtnOkHover);
color: @theme($fontTextHover);
}
}
.right {
position: relative;
margin-left: 100px;
height: 100%;
padding: 8px 12px;
z-index: 2;
overflow-y: auto;
.img-concent {
display: flex;
// max-height: 0px;
overflow: hidden;
flex-flow: row wrap;
.img-style {
margin: 8px 12px;
border-radius: 8px;
background: #303643;
width: 100px;
height: 80px;
}
.concent-div {
position: relative;
.img-name {
max-width: 120px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top: -10px;
margin-left: 4px;
position: relative;
cursor: default;
}
.img-select {
position: absolute;
display: flex;
width: 100px;
height: 80px;
top: 5px;
left: 5px;
padding: 3px;
cursor: pointer;
// align-items: flex-end;
.img-select-svg {
position: absolute;
left: 80px;
top: 10px;
width: 22px;
height: 22px;
}
}
}
}
.nodata {
line-height: 32px;
text-align: center;
font-size: 14px;
}
}
}
}
// 主题样式相关变量
.ngDialog-select-image-dialog {
.select-group-user-container {
background: @theme($bgAddGroupMemberContainer);
box-shadow: @theme($shadowAddGroupMemberContainer);
.left {
.left-list:hover {
background-color: @theme($bgNgdialogBtnOkHover);
color: @theme($fontTextHover);
}
}
.right {
background: @theme($bgAccountWrap);
box-shadow: @theme($shadowAccountListRightContent);
}
}
}