angular-prompt

Angular service to easily display prompt and confirmation modals.

This library depends on angular-ui-bootstrap.

Demo

Live Demo

Getting Started

Install with Bower or download the the files directly from the dist folder in the repo.

bower install angular-prompt --save

Add dist/angular-prompt.js to your index.html.

Add cgPrompt as a module dependency for your module.

angular.module('your_app', ['ui.bootstrap','cgPrompt']);

Now you can inject and use the prompt service.

function MyCtrl($scope, prompt) {

  //simple confirmation
  prompt({
    title: 'Delete this Thing?',
    message: 'Are you sure you want to do that?'
  }).then(function(){
    //he hit ok and not cancel
  });

  //ask the user for a string
  prompt({
    title: 'Give me a name',
    message: 'What would you like to name it?',
    input: true,
    label: 'Name',
    value: 'Current name',
    values: ['other','possible','names'],
    placeholder: 'Placeholder'
  }).then(function(name){
    //the promise is resolved with the user input
  });  
}

API

prompt(options);

• options.title

Type: String
Default: '' The title for the dialog.

• options.message

Type: String
Default: ''
The message inside the dialog.

• options.input

Type: Boolean
Default: false
Set to true if you wish to prompt the user for a text value.

• options.label

Type: String
Default: ''
The label for the input if input=true.

• options.value

Type: String
Default: ''
The initial value of the input if input=true.

• options.values

Type: Array of String
Default: undefined
A list of values available in a dropdown for the user to select as the input value.

• options.placeholder

Type: String
Default: ''
The placeholder of the input if input=true.

• options.buttons

Type: Array of Object with properties label,cancel, style, and primary
Default: [{ label:'OK', primary: true }, { label:'Cancel', cancel: true }]
A list of the buttons to display on the dialog.

The function returns a promise. That promise is resolved with either the button that was pressed, or in the case of input prompts, the value the user entered. If the user pressed a button where cancel=true or canceled the dialog another way (hit ESC, etc) then the promise is rejected.

Release History

• v1.2.0
  • Moved to Angular 1.5 and UI Bootstrap 1.3.
  • Refactored code to no longer use angular.element(...).scope().
• v1.1.0
  • Added style option to buttons.
• v1.0.1
  • Updated modal template with correct modal title class.
  • Added bower_components to ignore in bower.json.
  • Moved to angular-bootstrap v0.11.
• v1.0.0 - Initial release.