Skip to content

AngularJS directive such that an element's has a class added or removed based on its value

License

Notifications You must be signed in to change notification settings

pstrinkle/dynamic-class

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

dynamic-class

AngularJS directive such that an element's has a class added or removed based on its value

on npm

Latest release npm

Installing

Installing package via NPM
npm i dynamic-class --save

Installing package via Bower
bower install dynamic-class --save

Usage

Given some element in the DOM, you attach an options and a value that you want to use as input to the directive, dynamic-class.
The options should be an array of Objects each with three keys: min the minimum value to use for this class, max the value strictly greater than and the class to use. As the value specified changes a class is chosen and applied to the DOM element given the options on a first-fit approach.

<div ng-controller="startCtrl">
  <div>
    <h2 ng-bind="value" options="coloringOptions" value="value" dynamic-class></h2>
  </div>
  <div>
    <input type="number" ng-model="value" />
  </div>
</div>
angular.module("ColoringDirectiveApp", ["dynamicClass"]).controller('startCtrl', ['$scope', function($scope) {
    $scope.coloringOptions = [
        /* <= < */
        {min: 0, max: 5, class: 'low'},
        {min: 5, max: 10, class: 'med'},
        {min: 10, max: 15, class: 'high'},
    ];
}]);

License

MIT

About

AngularJS directive such that an element's has a class added or removed based on its value

Resources

License

Stars

Watchers

Forks

Packages

No packages published