• Stars
    star
    146
  • Rank 252,769 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated almost 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Angular/Bootstrap animated submit button directive

ng-bs-animated-button

Angular/Bootstrap animated submit button directive.

Demo

http://jeremypeters.github.io/ng-bs-animated-button/

Usage

  1. Install via Bower:
bower install ng-bs-animated-button
  1. Include ng-bs-animated-button.js and ng-bs-animated-button.css in your app. They should be located at bower_components/ng-bs-animated-button/.

  2. Add jp.ng-bs-animated-button as a module dependency to your app:

angular.module('yourApp', ['jp.ng-bs-animated-button']);
  1. Add the directive with the required attributes to your template:
<jp-ng-bs-animated-button is-submitting="isSubmitting" result="result" options="options"></jp-ng-bs-animated-button>
  1. Add the required scope variables and any options to your controller:
app.controller('yourCtrl', function($scope) {

  // Required - set to true on submission
  $scope.isSubmitting = null;

  // Required - set to 'success' or 'error' on success/failure
  $scope.result = null;

  // Optional
  $scope.options = {
    buttonDefaultText: 'Lorem ipsum',
    ...
  };

});

Options

Option Default
buttonDefaultClass 'btn-primary'
buttonSubmittingClass 'btn-primary'
buttonSuccessClass 'btn-primary'
buttonErrorClass 'btn-danger'
buttonDefaultText 'Submit'
buttonSubmittingText 'Submitting...'
buttonSuccessText 'Completed'
buttonErrorText 'There was an error'
buttonInitialIcon 'glyphicon glyphicon-plus'
buttonSubmittingIcon 'glyphicon glyphicon-refresh'
buttonSuccessIcon 'glyphicon glyphicon-ok'
buttonErrorIcon 'glyphicon glyphicon-remove'
animationCompleteTime '2000'
iconsPosition 'left'
onlyIcons false

Disabling the button

<jp-ng-bs-animated-button is-submitting="isSubmitting" result="result" options="options" form-is-invalid="formIsInvalid()"></jp-ng-bs-animated-button>