angularJs - 弹窗

突然要维护前辈们的项目，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);}}
}

angularJs - 弹窗相关推荐

【Ionic+AngularJS 开发】之『个人日常管理』App（二）
准备工作资源预装工具安装bower 1 npm install -g bower 安装ngCordova 1 bower install ngCordova (*由于网络获取资源的原因,后面几次 ...
Android 自定义WebView弹窗及屏蔽弹窗
额,还是那个WebView的问题,内核已换成腾讯X5内核,所以接下来的内容会有一些X5内核的方法.但我们的H5是不能改的,还是只有委屈我们自己.先看看H5自带的弹窗这样子的弹窗在不同的手机上呈现的可 ...
angularjs sill 创建项目_开源项目——博客项目MyBlogs.Core，基于.NET 5
个人博客站项目源码,高性能低占用的博客系统,这也许是我个人目前写过的性能最高的web项目了 .目前日均处理请求数80-120w次,同时在线活跃用户数30-100人,数据量累计已达到100多万条,数据库 ...
AngularJS+Satellizer+Node.js+MongoDB-Instagram-01
2019独角兽企业重金招聘Python工程师标准>>> Build an Instagram clone with AngularJS, Satellizer, Node.js an ...
AngularJS和DataModel
通常,在AngularJS中使用JSON作为存储数据的模型.我们可能这样在controller中写model: app.controller('BookController',['$scope',fu ...
AngularJS 杂项知识点
1.要用ngChange要同时使用ngModel,下拉选择获取当前选中值. 2.打包代替动态加载(js文件) requirejs真正的价值在于模块化,不是动态加载,angularjs本身有模块化机制, ...
angularjs post 跨域
web api搞好了:用Ajax妥妥的:但是前端用的AngulagJS,也懒得再换为Ajax了: 但是问题来了:提示: 已拦截跨源请求:同源策略禁止读取位于 http://x.x.x.x:port/a ...
AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
【12】AngularJS 事件
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <div ng-app=&qu ...

angularJs - 弹窗

angularJs - 弹窗相关推荐

最新文章

热门文章