An implementation of the Float Label Pattern for Angular. At this stage the code is still very much in its baby-state, so treat it as such (not production ready).

$ bower install kasperlewau/angular-float-label

or just grab the source.

var app = angular.module('myModule', ['kl.angular-float-label', ...]);

.fl-input, .fl-textarea {
  position: relative;
  input, label, textarea {
    transition: all ease-in-out .15s;
    &::-webkit-input-placeholder { color: inherit; }
    &::-moz-placeholder { color: inherit; } /* firefox 19+ */
    &:-ms-input-placeholder { color: inherit; } /* ie */
    &:-moz-placeholder { color: inherit; }
  }
  label {
    position: absolute;
    top: -1.1em;
    left: 5px;
    opacity: 0;
  }
  &.fl-focused, &.fl-populated {
    label {
      opacity: 1;
      top: -1.5em;
      left: 5px;
    }
  }
}

<form>
  <input type="email" float-label="Email" ng-model="usr.email" required>
  <textarea float-label="Description" ng-model="usr.description"></textarea>
</form>
<!-- becomes -->
<form>
  <div class="fl-input">
    <label for="usr-email">Email</label>
    <input type="email" float-label="Email" ng-model="usr.email" required="" name="usr-email" class="ng-pristine ng-invalid ng-invalid-required ng-valid-email">
  </div>
  <div class="fl-textarea">
    <label for="usr-description">Description</label>
    <textarea float-label="Description" ng-model="usr.description" name="usr-description" class="ng-pristine ng-valid"></textarea>
  </div>
</form>

• [ ] Write tests
• [x] Move away from the oh-so-stupid setTimeout() on init.
• [x] Handle HTML5 inline validation.
  • [x] Conditional placeholder attributes + inherited styling to enable HTML5 validations.
  • [x] Some sort of flickering introduced with this upon multiple submits, check it out.
• [x] Move DOM transforming to compile().
  • [/] Not fully switched to compile(), working as of now however.
• [ ] Add hosted demo with examples // Improve README.
• [ ] Add support for passed in opts as args
  • [ ] Classes
  • [ ] Animation
  • [ ] Predefined type
• [ ] Probably 100 other things I've yet to think of.

MIT