Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="app">
   <!--[if lte IE 8]>
    <script>
        console.log('IE8')
        document.createElement('bars-max');
        document.createElement('bars-current');
    </script>
    <![endif]-->
  
<div ng-controller="controller">
    <div ng-repeat="charge in chargeability">
        <div bars-max style="z-index:-1;float:left;" max="charge.max"></div>
        <div style="clear:both;"></div>
        <div bars-current style="z-index:999999;" current="charge.current" max="charge.max"></div>
        <div style="clear:both;height:6px;"></div>
    </div>
</div>
</body>
</html>
 
    var app = angular.module('app', []);
​
    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;
    });
​
    app.directive('barsMax', function ($compile) {
        return {
            restrict: 'AE',
            scope: {
                max: '='
            },
            link: function postLink(scope, element, attrs) {
                scope.$watch('max', function (newValue) {
                    // value attribute has changed, re-render              
                    var value = Number(newValue);
                    var dval = value / 3;
                    var newContent = '';
                    element.children().remove();
                    while (dval > 0) {
                        newContent += '<div id="bar" style="float:left; color:#D8D8D8;    height: 17px;margin-top:7px;background-color:#D8D8D8;">.</div>';
                        dval--;
                    }
                    newContent += '&nbsp;<span>Max: ' + value + '</span>';
                    element.append($compile(newContent)(scope));
                });
            }
        };
    });
​
    app.directive('barsCurrent', function ($compile) {
        return {
            restrict: 'AE',
            scope: {
                current: '=',
                max: '='
            },
            link: function postLink(scope, element, attrs) {
                console.log(scope.current >= scope.max);
                
                scope.$watch('current', function (newValue) {
                    // value attribute has changed, re-render              
                    var value = Number(newValue);
                    var dval = value / 3;
                    var newContent = '';
                    element.children().remove();
                    while (dval > 0) {
                        newContent += '<div id="bar" ng-class="{greater: current >= max, less: current < max}"style="float:left; color:green; height: 17px;margin-top:7px;background-color:green;">.</div>';
                        dval--;
                    }
                    newContent += '&nbsp;<span>Current: ' + value + '</span>';
                    element.append($compile(newContent)(scope));
                });
            }
        };
    });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers