UI-Bootstrap 模态对话框示例

官网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都能使用同一个模板。