UI-Bootstrap 模态对话框示例
2024-05-19 10:27:47
官网API: 点击打开链接
一、JS代码示例
define([ '{angular}/angular' ], function(angular) {'use strict';var optionList = angular.module('OptionList', [ 'ngResource' ]);optionList.controller('DictionaryOptionListCtrl', [ '$scope', '$resource', '$location','$modal','optionService','colorService', 'NotificationService',function($scope, $resource, $location,$modal, optionService,colorService, notificationService) {optionService.query({}, function(data) {$scope.optionData = data;});// -----------search by reference--------------- $scope.search = function() {optionService.query({searchText : $scope.searchText}, function(data) { $scope.optionData = data;}, function() {});};$scope.$watch('searchText', function(newValue, oldValue) {if (newValue === oldValue)return;if ($.trim(newValue).length === 0) {optionService.query({}, function(data) {$scope.optionData = data;});}});//------------create option------------------$scope.openCreateDictionaryOptionPopup = function () {var modalInstance = $modal.open({animation: true,templateUrl: 'vehicle/views/option/create.html',controller: 'OptionModalCreateCtrl',size: 'lg',resolve: {optionObject: function() {return $scope.optionObject;}}});modalInstance.result.then(function (optionObject) {optionService.save({}, optionObject, function() {$scope.optionData.push(angular.copy(optionObject, {}));}, function() {});});}; // -----------select row---------------$scope.currentSelectedRowEntity;$scope.selectRow = function(item) {$scope.currentSelectedRowEntity = item;};// -----------update modal dialog---------------$scope.tempRowEntityForUpdate = {};$scope.openUpdateModal = function () {var modalInstance = $modal.open({animation: true,templateUrl: 'vehicle/views/option/update.html',controller: 'OptionModalUpdateCtrl',size: 'lg',resolve: {optionObject: function() {angular.copy($scope.currentSelectedRowEntity, $scope.tempRowEntityForUpdate);return $scope.tempRowEntityForUpdate;}}});modalInstance.result.then(function (optionObject) {optionService.update({}, optionObject, function(data) {if(data.error){for (var i = 0; i < data.errorList.length; i++) {notificationService.alert(" Update failure! Caused by:"+data.errorList[i]);}}else{angular.copy(optionObject, $scope.currentSelectedRowEntity);}});});}; // -------show the delete modal dialog---------$scope.openDeleteOptionPopup = function () {var modalInstance = $modal.open({animation: true,templateUrl: 'vehicle/views/option/confirmDelete.html',controller: 'OptionModalDeleteCtrl'});modalInstance.result.then(function () {optionService.remove({}, {optionId : $scope.currentSelectedRowEntity.reference}, function(data) {if(data.notice==="OptionNotDeleted"){notificationService.alert("This Option is referenced, can not delete!");}else{for (var i = 0; i < $scope.optionData.length; i++) {if ($scope.optionData[i] === $scope.currentSelectedRowEntity) {$scope.optionData.splice(i, 1);$scope.currentSelectedRowEntity = null;break;}}}});});}; } ]);optionList.controller('OptionModalCreateCtrl', [ '$scope', '$modalInstance', 'optionObject', function ($scope, $modalInstance, optionObject) {$scope.optionObject = optionObject;$scope.ok = function () {$modalInstance.close($scope.optionObject);};$scope.cancel = function () {$modalInstance.dismiss('cancel');};}]);optionList.controller('OptionModalUpdateCtrl', [ '$scope', '$modalInstance', 'optionObject', function ($scope, $modalInstance, optionObject) {$scope.optionObject = optionObject;// set readony for update$scope.mode="update";$scope.ok = function () {$modalInstance.close($scope.optionObject);};$scope.cancel = function () {$modalInstance.dismiss('cancel');};}]);optionList.controller('OptionModalDeleteCtrl', [ '$scope', '$modalInstance', function ($scope, $modalInstance) {$scope.ok = function () {$modalInstance.close();};$scope.cancel = function () {$modalInstance.dismiss('cancel');};}]);return {angularModules : [ 'OptionList' ]};});
二、update.html
<div class="modal-header"><h3 class="modal-title">Update Option</h3>
</div><form name="optionUpdateForm" novalidate class="form-horizontal"><div class="modal-body"><div data-ng-include="'vehicle/views/option/<span style="background-color: rgb(255, 255, 51);">templateCreateUpdate</span>.html'"data-ng-init="optionForm=optionUpdateForm"></div></div><div class="modal-footer"><button class="btn btn-primary" data-ng-click="ok()"data-ng-disabled="optionUpdateForm.$invalid">Save</button><button class="btn btn-warning" data-ng-click="cancel()">Cancel</button></div></form>
三、confirmDelete.html
<div class="modal-header"><h3 class="modal-title">Warning</h3>
</div>
<div class="modal-body"><p>Are your sure to delete the option ?</p>
</div>
<div class="modal-footer"><button class="btn btn-primary" data-ng-click="ok()">OK</button><button class="btn btn-danger" data-ng-click="cancel()">Cancel</button>
</div>四、templateCreateUpdate.html
<div class="container-fluid"><div class="row"><div class="col-md-5"><div class="form-group" data-ng-class="{ 'has-error': optionForm.reference.$touched && optionForm.reference.$invalid }"><label for="reference" class="control-label">Reference</label> <input type="text" class="form-control" id="reference" name="reference" data-ng-model="optionObject.reference" data-ng-readonly="mode==='update'" required><div class="help-block" data-ng-messages="optionForm.reference.$error" data-ng-if="optionForm.reference.$touched && optionForm.reference.$invalid"><p data-ng-message="required">Reference is required.</p></div></div></div><div class="col-md-5 col-md-offset-1"><div class="form-group" data-ng-class="{ 'has-error': optionForm.name.$touched && optionForm.name.$invalid }"><label for="name" class="control-label">Name</label> <input type="text" class="form-control" id="name" name="name" data-ng-model="optionObject.name" required><div class="help-block" data-ng-messages=" optionForm.name.$error" data-ng-if=" optionForm.name.$touched && optionForm.name.$invalid"><p data-ng-message="required">Name is required.</p></div></div></div></div><div class="row"><div class="col-md-5"><div class="form-group" data-ng-class="{ 'has-error': optionForm.description.$touched && optionForm.description.$invalid }"><label for="description" class="control-label">Description</label> <input type="text" class="form-control" id="description" name="description" data-ng-model="optionObject.description" required><div class="help-block" data-ng-messages=" optionForm.description.$error" data-ng-if="optionForm.description.$touched && optionForm.description.$invalid"><p data-ng-message="required">Description is required.</p></div></div></div></div>
五、create.html
<div class="modal-header"><h3 class="modal-title">Create Option</h3>
</div><form name="optionCreateForm" novalidate class="form-horizontal" data-ng-init="option={}" novalidate><div class="modal-body"><div data-ng-include="'vehicle/views/option/templateCreateUpdate.html'"data-ng-init="optionObject=option;optionForm=optionCreateForm"></div></div><div class="modal-footer"><button class="btn btn-primary" data-ng-click="ok()"data-ng-disabled="optionCreateForm.$invalid">Save</button><button class="btn btn-warning" data-ng-click="cancel()">Cancel</button></div></form>六、总结
- 首先需要导入angular.js ui-bootstrap-tpls-0.13.1.js
- 以创建为例：
<form name="optionCreateForm" novalidate class="form-horizontal"data-ng-init="option={}" novalidate>
<div class="modal-body">
<div data-ng-include="'vehicle/views/option/templateCreateUpdate.html'"
data-ng-init="optionObject=option;optionForm=optionCreateForm"></div>
</div>
通过页面的初始化操作，动态的将option对象赋值给optionObject, 将当前的表名optionCreateForm 赋值给optionForm使用：
<div class="form-group" data-ng-class="{ 'has-error': optionForm.reference.$touched && optionForm.reference.$invalid }">
<label for="reference" class="control-label">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" data-ng-model="optionObject.reference" data-ng-readonly="mode==='update'" required>
<div class="help-block" data-ng-messages="optionForm.reference.$error" data-ng-if="optionForm.reference.$touched && optionForm.reference.$invalid">
<p data-ng-message="required">Reference is required.</p>
</div>
</div>这样就能达到了动态切换，也就是create 和update都能使用同一个模板。
UI-Bootstrap 模态对话框示例相关推荐
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过 ...
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载
http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...
- Bootstrap 模态对话框
模态对话框 JavaScript内置了 3 种对话框:alert().prompt().confirm().alert() 只是一个简单的提示对话框,prompt() 可以接受用户输入的信息,conf ...
- 自定义tag打包Bootstrap模态对话框并动态加载传值
文章目录 Bootstrap的模态对话框 自定义tag文件如下: 加载方法 注意事项 动态加载的好处 Bootstrap的模态对话框 为了复用bootstrap的模态框,将其封装入自定义tag文件中, ...
- webuploader在bootstrap模态对话框中选择文件按钮无效的问题
搜了很多,网上主要的说法是 当一个元素是hidden时,addbutton绑定是会失败的,所以单击选择文件按钮就无效了 而bootstrap模态框一开始是隐藏的,因此必须在其显示完毕后才可以初始化we ...
- jQuery模态对话框示例
使用自定义属性来完成: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- [Qt入门]模态和非模态对话框创建
模态对话框创建: #include "mainwindow.h" #include "ui_mainwindow.h" #include<QDialog& ...
- antd vue关闭模态对话框_如何在Bootstrap项目中用Vue.js替代jQuery
Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...
- 变分模态分解_Android小部件示例中的模态对话框（弹出）
变分模态分解 在此示例中,我们将看到如何在主屏幕中创建一个可以打开弹出对话框的Android小部件. 如您所知,Android Widgets是小型应用程序,基本上可以做两件事. 按下时启动新的活动, ...
最新文章
- 返回值_关于GWLP_WNDPROC的那些奇怪的返回值
- 归档—监控ORACLE数据库告警日志
- 新浪微博-企业微博运营手册
- 侯宁：不该捞的别去捞 踏空不是浪费时间
- 零基础 Amazon Web Services (AWS) 入门教程图文版（一）
- Linux学习资源汇总
- java 高并发im_java高并发（四）并发编程与线程安全
- 因为造轮子，我一个月就转正了 | 原力计划
- storm 可靠性和非可靠性
- 如何使用Vectorworks Vision 2020将场景另存为图像
- 《企业软件交付：敏捷与高效管理精要》——2.5 项目执行结果
- BZOJ5224[Lydsy2017省队十连测] 毁灭
- Java 同环比计算相关逻辑
- 公司研发人员（含测试）经理、组长能力评价表
- 条形码的正确使用方法和技巧
- Springboot企业邮箱发送邮件
- excel删除无尽空白行_会计常用的Excel技巧，建议收藏~
- 计算机毕业设计JavaWeb美食网站设计(源码+系统+mysql数据库+lw文档）
- 为什么北半球的旋涡都是逆时针的
- php数字运算符号,php运算符号