progress bar error in angular bootstrap application
Question
I have the following angular app:
<!DOCTYPE html>
<html ng-app="StudentProgram">
<head>
<title>Student Program Management</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/badge.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel col-lg-3 col-md-3 col-sm-2">
<div ng-controller="mylistcontroller" class="" id="menu">
<br/>
<h4><font color=#636363>My Academic Programs</font><button id="tooltip1" type="button" class="btn btn-default pull-right" data-toggle="tooltip" data-placement="right" data-original-title="Add a Program"><span class="glyphicon glyphicon-plus-sign pull-right"></span></button></h4>
<div ng-repeat="prog in programs" class="list-group">
<a ng-repeat="list in prog.programstaken" href="#" class="list-group-item">
{{list.program}}<span class="badge badge-info pull-right">{{list.completed}} / {{list.required}}</span>
<div class="progress progress-striped">
<div class="progress-bar" ng-class="{'progress-bar-danger': getPercentage()<40, 'progress-bar-info': getPercentage()>=40 && getPercentage()<70, 'progress-bar-success': getPercentage()>=70}" role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="{width:(getPercentage()+'%')}">
{{getPercentage()}}%
</div>
</div>
</a>
<!-- <a href="#" class="list-group-item">
AA.ARTS<span class="badge badge-info pull-right">29 / 60</span>
<div class="progress progress-striped">
<div class="progress-bar" role="progressbar" aria-valuenow="48.3" aria-valuemin="0" aria-valuemax="100" style="width: 48.3%;">
48.3%
</div>
</div>
</a> -->
</div>
</div>
<br/><br/>
</div>
</div>
<script id="tooltipid" type="text/javascript">
$(document).ready(function() {
$('#tooltip1').tooltip();
});
</script>
<script src="js/bootstrap.js"></script>
<script>
var app = angular.module('StudentProgram', ['ui.bootstrap']);
app.controller('mylistcontroller', function($scope, $modal, $log){
$scope.programs=[{programlist:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"},
{program:"AAS.BUSI.ADMIN", completed:"0", required:"60"},
{program:"AAS.MANAGEMENT", completed:"0", required:"60"},
{program:"AS.FS.BUSINESS", completed:"0", required:"60"},
{program:"AAS.NURSING", completed:"0", required:"60"}],
programstaken:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"}]}
];
$scope.getPercentage = function () {
return (($scope.programstaken.completed)/($scope.programstaken.required)*100).toFixed(2);
}
});
</script>
<br/>
</div>
</body>
</html>
The progress bar is not getting the value for the getPercentage() function. Where is my error?
2 answers
solution1
1 2014-04-18 17:18:07
$scope.programstaken isn't being defined.
programstaken is buried within an Array called $scope.programs and the array syntax is broken.
I think what you want is for $scope.programs to be an Object:
$scope.programs={
programlist:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"},
{program:"AAS.BUSI.ADMIN", completed:"0", required:"60"},
{program:"AAS.MANAGEMENT", completed:"0", required:"60"},
{program:"AS.FS.BUSINESS", completed:"0", required:"60"},
{program:"AAS.NURSING", completed:"0", required:"60"}
],
programstaken:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"}
]
};
then you would access it as $scope.programs.programstaken rather than $scope.programstaken
solution2
1 ACCPTED 2014-04-18 18:44:37
The following are the problems that I've noticed in the code above:
You are trying to access the
completedandrequiredproperty of each repeated item of yourprogramstakenarray without providing a reference of the current item.You didn't use the angular-ui
progressbardirectve and its propertiesmax,value, andtypeto manipulate angular-ui's progressbar.You can place your logic in a controller function to determine the percentage and the progressbar color to assign to the
typeproperty of the progressbar directive.
Solution:
1 Create controller functions with an access to the current reference of the repeated item, eg add a parameter as a reference to such function.
2 . Make use of the angular-ui progressbar directives' properties by assigning them with the programstaken item properties. Create a controller function to determine the progressbar color considering what I mentioned in 1 .
max = required
value = completed
type = getProgressType()
See this PLUNKER for the live demo.
HTML
change
<div class="progress progress-striped">
<div class="progress-bar" ng-class="{'progress-bar-danger': getPercentage()<40, 'progress-bar-info': getPercentage()>=40 && getPercentage()<70, 'progress-bar-success': getPercentage()>=70}" role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="{width:(getPercentage()+'%')}">
{{getPercentage()}}%
</div>
</div>
to
<progressbar class="progress-striped active" max="list.required" value="list.completed" type="{{getProgressType(list)}}">{{getPercentage(list)}}%</progressbar>
JAVASCRIPT
change
$scope.getPercentage = function () {
return (($scope.programstaken.completed)/($scope.programstaken.required)*100).toFixed(2);
}
to
$scope.getPercentage = function(item) {
return ((item.completed / item.required) * 100.00).toFixed(2);
};
$scope.getProgressType = function(item) {
var percent = $scope.getPercentage(item);
if(percent < 40) return 'danger';
if(percent < 70) return 'info';
return 'success';
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.