AngularJS implementation of float labels

Bower:

bower install angular-float-labels --save

app.js:

angular.module('myAwesomeApp', ['angular-float-labels'])

form.html

<input type="text" placeholder="Enter some text"/>
<input type="email" placeholder="Enter your email"/>

If you do not want to the logic to trigger from the placeholder attribute, please include angular-float-labels.custom.js instead of angular-float-labels.js and configure the provider appropriately:

.config(function(floatLabelProvider) {
		floatLabelProvider.setAttributeName('floatLabel');
})

Override CSS classes defined within angular-float-labels.css or simply do not include it and create them all yourself.

Please view the demo

If you're using the Rails assets pipeline or UglifyJS, be sure to use v0.1.1 (or later), which includes annotation for the $parse dependency. For concatenated + minified Javascript with Angular >1.3, you can force function annotation checking with:

<!-- auto bootstrapping -->
<div ng-app="myApp" ng-strict-di>

or

// manual bootstrapping
angular.bootstrap(document.body, ['myApp'], { strictDi: true});

• v0.1.1 - Fix minification issues and auto-wrap input element
• v0.1.0 - Add support for a custom attribute instead of placeholder
• v0.0.7 - Fix validity check
• v0.0.6 - see v0.0.5
• v0.0.5 - Deprecated ngModel requirement and removed unnecessary lodash/underscore dependency
• v0.0.4 - Fixing issue #1 and #2
• v0.0.3 - Adding main files to bower.json
• v0.0.2 - Fixing dependency versions
• v0.0.1 - Basic input support