Below are the scripts and styles that were implemented:
<script src="angular.min.js"></script>
<style>
.greater {
color:#D7E3BF;
background-color:#D7E3BF;
}
.less {
color:#E5B9B5;
background-color:#E5B9B5;
}
</style>
<script>
var app = angular.module('MyTutorialApp', []);
app.controller("controller", function ($scope) {
$scope.chargeability = [{ date: '15-Sep-13', max: 100, current: 100 },
{ date: '30-Sep-13', max: 60, current: 50 },
{ date: '15-Oct-13', max: 80, current: 20 }];
$scope.ytd = 122;
});
The following code is for the gray-colored bar:
app.directive('barsMax', function () {
return {
restrict: 'E',
link: function postLink(scope, element, attrs) {
attrs.$observe('value', function (newValue) {
// value attribute has changed, re-render
var value = Number(newValue);
var dval = value / 3;
element.children().remove();
while (dval > 0) {
element.append('<div id="bar" style="float:left; color:#D8D8D8; height: 17px;margin-top:7px;background-color:#D8D8D8;">.</div>')
dval--;
}
});
}
};
});
This portion of the code deals with the green-colored bar:
app.directive('barsCurrent', function () {
return {
restrict: 'E',
link: function postLink(scope, element, attrs) {
attrs.$observe('value', function (newValue) {
// value attribute has changed, re-render
var value = Number(newValue);
var dval = value / 3;
element.children().remove();
while (dval > 0) {
element.append('<div id="bar" style="float:left; color:green; height: 17px;margin-top:7px;background-color:green;">.</div>')
dval--;
}
});
}
};
});
</script>
This part showcases the main body of the code:
<div ng-repeat="charge in chargeability">
<bars-max style="z-index:-1;float:left;margin-top:-24px;" value="{{charge.max}}"></bars-max>
<bars-current style="z-index:-1;float:left;margin-top:-24px;" value="{{charge.current}}"></bars-current>
<div style="clear:both;height:6px;"></div>
</div>
An issue arose when attempting to apply an:
ng-class="{'greater': charge.current >= charge.max, 'less': charge.current < charge.max}"
inside the barsCurrent directive to handle different colors based on conditions. Unfortunately, placing this ng-class within the barsCurrent directive did not produce the desired effect.
If you have any suggestions or solutions to resolve this issue, your help would be greatly appreciated. Thank you.