CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Abhishek
Abhishek

Reputation: 3068

progress bar error in angular bootstrap application

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?

Upvotes: 1

Views: 1690

Answers (2)

ryeballar
ryeballar

Reputation: 30088

The following are the problems that I've noticed in the code above:

  1. You are trying to access the completed and required property of each repeated item of your programstaken array without providing a reference of the current item.

  2. You didn't use the angular-ui progressbar directve and its properties max, value, and type to manipulate angular-ui's progressbar.

  3. You can place your logic in a controller function to determine the percentage and the progressbar color to assign to the type property of the progressbar directive.

Solution:

1 Create controller functions with an access to the current reference of the repeated item, e.g. 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';
};

Upvotes: 1

jshanley
jshanley

Reputation: 9128

$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

Upvotes: 1

Related Questions