<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="oms.css">
</head>
<body ng-controller="ProgressDemoCtrl">
<div class="container">
<div class="row">
<div class="col-md-1">
<h1>Progress bar</h1>
</div>
<div class="col-md-1">
<div class="ui-grid-cell-contents">
<uib-progress class="progress active" max="row.entity.progressBarStatus.totalQuantity">
<uib-bar value="row.entity.progressBarStatus.fillQuantity - row.entity.nettingSize" type="info" uib-tooltip="{{row.entity.progressBarStatus.fillQuantity - row.entity.nettingSize}} filled" tooltip-placement="right">
</uib-bar>
<uib-bar value="row.entity.nettingSize" type="warning" uib-tooltip="{{row.entity.nettingSize}} netted" tooltip-placement="left">
</uib-bar>
</uib-progress>
<div id="vertical-mark">{{row.entity.progressBarStatus.fillQuantity}} / {{row.entity.progressBarStatus.totalQuantity}} </div>
<!--<span>{{row.entity.progressBarStatus.fillQuantity}} / {{row.entity.progressBarStatus.totalQuantity}}</span>-->
</div>
</div>
</div>
</div>
</body>
</html>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ProgressDemoCtrl', function ($scope) {
$scope.row = {
entity: {
nettingSize: 5,
progressBarStatus: {
fillQuantity: 10,
totalQuantity: 10
}
}
};
});
#vertical-mark {
position:relative;
top: -40px;
padding-left: 43%;
color: black;
float: left;
width: auto;
}