Skip to content
AngularJS directive such that an element's has a class added or removed based on its value
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
.gitignore
LICENSE
README.md
bower.json
package.json

README.md

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

You can’t perform that action at this time.