modal-flex
Flexible angular-bootstrap wrapper.
Install with bower
bower install modal-flex
Inject in module
var app = angular.module('yourModule', [
...
'modalFlex',
...
]);
Inject in controller
var app = angular.module('yourModule', [
...
'modalFlex',
...
]).controller('yourController', function($scope, $fmodal){
...
});
Usage
$fmodal.open(options, close, dismiss);
options
method
- string ['show', 'edit', 'delete']
- used to define what type of modal to call
- defaults to 'show' if not defined
type
- string
- used to replace "Are you sure you want to delete this {{type}}" in the delete modal
- defaults to 'object' if not defined
object
- Object
- the object to be display, edit, or deleted
- sample : {id: '1234567890', name: 'Juan Dela Cruz'}
show
- Array
- the list of keys of the object that will be displayed
- if not defined, all keys of the object will be displayed alphabetically
- sample : ['name', 'address', 'age']
- note : the keys will be displayed in the modal according to the order you declared in this option
capitalize
- Boolean
- set to false to disable capitalizing keys
options || radios
- Array[{ key: 'keyName', options: arrayOfOptions}]
- used to define all keys of the object that needs to be a combobox/radio-button instead of a textbox
- sample:
[ {key: 'civilStatus', options: ["Single", "Married", "Widowed"]},
{key: 'yearJoined', options: ['2000', '2001', '2002']},
{key: 'referrer', options: [{id:'10064', name:'Jose P. Rizal'}, {id:'10065', name:'Andres Bonifacio'}]
- note: if the array of options is an object, it will display the name but the value will be the id
numbers || textAreas || emails || passwords || checkboxes
- Array[String]
- used to define all keys of the object that needs to be a number-box/textarea/email-box/password-box/checkbox instead of a textbox
- sample: ["price","age"]
- sample: ["description","comment"]
files
- Array[String]
- used to define all keys of the object that needs to be a input file instead of a textbox
- sample: ["price","age"]
readOnly
- Array[String]
- used to define all keys of the object that will be on read-only state
- sample: ["id","password"]
required
- Array[String]
- used to define all keys of the object that is required
- sample: ["name","category"]
onOk
- function(object, close, error)
- the callback function to be called when the Ok[Save/Delete] button is clicked.
- object : returns the edited object
- close : returns a function you can call to invoke the "close" modal
- the modal wont close if you dont call this function
- takes a one parameter : the value to return when the modal is closed
- to invoke: close() or close(object)
- error : returns a function you can call to display an error
- takes a one parameter : the error message, can be a string on an HTML template
- to invoke: error('The server returned a 404 error') or error('<h1>The server returned a 500 error</h1>')
- if not defined, the modal will close automatically when the Ok[Save/Delete] button in clicked
onCancel
- function(object, message)
- the callback function to be called when the Cancel button is clicked.
- object : returns the modified object
- close : returns a function you can call to invoke the "dismiss" modal
- the modal wont close if you dont call this function
- takes a one parameter : the value to return when the modal is closed
- to invoke: close() or close("canceled")
- if not defined, the modal will close automatically when the Cancel button in clicked
okText
- String
- overrides the Save/Delete text on the modal button
cancelText
- String
- overrides the Cancel text on the modal button
titleText
- String
- sets the modal title text
- if method is 'delete', defaults to 'Are you sure you want to delete this object?'
- if method is 'edit', defaults to obect's name key, and blank if obect's name key is not defined
message
- HTML text
- displays a message in the modal
- can use scopes or methods in the modal such as close(), dismiss(), ok() and cancel
- in case custom scopes are needed, declare scopes in the resolve parameter (see resolve)
displayCancel
- Boolean
- option to display the cancel button
icons
- Boolean
- if set false, the button icons wont be displayed
resolve
- object
- pass scopes that can be used in the message parameter
Sample:
resolve: {
clicked: function(){
alert('click function called')
}
},
message: "<button ng-click='clicked()'>button</button"
close
- the callback function when the modal is closed
dismiss
- the callback function when the modal is dismissed
Sample
Show Modal
$scope.showDetails = function (product) {
$fmodal.open({
method: "show", // you can also not write this line
object: product,
show: [
"description",
"category",
"price",
"image",
"store"
]
})
};
Create Modal
var defaultProduct = {
name: "New Product",
description: undefined,
category: undefined,
price: undefined,
image: undefined
}
$scope.addProduct = function () {
$fmodal.open({
method: "edit",
object: defaultProduct,
options: [
{ key: "category", options: [{id:'001',name:'small'}, {id:'002',name:'big'}] }
],
onSuccess: function(product, close, error){
ProductService.save(product, function(data, err){
if(err) return err.message;
close(data);
});
}
}, function (product) {
$scope.products.push(product);
});
}
Edit Modal
$scope.editProduct = function (product) {
$fmodal.open({
method: "edit",
object: product,
show: ["id", "name", "description", "category", "price", "image"],
options: [
{key: "category", options: [{id:'001',name:'small'}, {id:'002',name:'big'}]}
],
readOnly: ["id"],
onSuccess: function(product, close, error){
ProductService.save(product, function(data, err){
if(err) return err.message;
close(data);
});
}
}, function (product) {
for (var i = $scope.products.length - 1; i >= 0; i--) {
if($scope.products[i].id == product.id){
$scope.products[i] = product;
}
};
});
});
Delete Modal
$scope.deleteProduct = function (product) {
$fmodal.open({
method: "delete",
type: "product",
object: product,
show: ["id", "name"],
onSuccess: function(product, close, error){
ProductService.delete(product.id, function(data, err){
if(err) return err.message;
close(product);
});
},
}, function (product) {
for (var i = $scope.products.length - 1; i >= 0; i--) {
if($scope.products[i].id == product.id){
$scope.products.splice(i, 1)
return;
}
};
});
}
Custom Modal
$scope.deliver = function(product){
$fmodal.open({
method: "edit",
titleText: 'Delivery Details',
message: '<p>Please confirm the delivery details below.</p>',
object: {
productId: product.id,
'Product Name': product.name,
'Store': product.store.name,
'Delivery Address': undefined
},
show: ["Product Name", "Store", "Delivery Address"],
readOnly: ["Product Name", "Store"],
textAreas: ['Delivery Address'],
okText: "Submit",
cancelText: "Abort",
onOk: function(deliveryDetails, close, error){
console.log(deliveryDetails)
// DO SOMETHING
close();
}
});
}