javascript - Angular Bootstrap 应用程序中的进度条错误

我有以下 Angular 应用:

<!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>

进度条未获取 getPercentage() 函数的值。我的错误在哪里？

最佳答案

以下是我在上面的代码中注意到的问题:

您正在尝试访问 programstaken 数组中每个重复项的 completed 和 required 属性，但未提供对当前项目。
您没有使用 angular-ui progressbar 指令及其属性 max、value 和 type 来操作 angular-ui 的进度条。
您可以将您的逻辑放在 Controller 函数中，以确定分配给进度条指令的 type 属性的百分比和进度条颜色。

解决方法:

1 创建 Controller 函数，可以访问重复项的当前引用，例如添加一个参数作为对此类函数的引用。

2。利用 angular-ui通过为进度条指令分配 programstaken 项目属性来实现它们的属性。根据我在 1 中提到的内容，创建一个 Controller 函数来确定进度条颜色。

最大 = 必需

值(value)=完成

类型 = getProgressType()

查看此 PLUNKER用于现场演示。

HTML

改变

<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>

到

<progressbar class="progress-striped active" max="list.required" value="list.completed" type="{{getProgressType(list)}}">{{getPercentage(list)}}%</progressbar>

JavaScript

改变

$scope.getPercentage = function () {
  return (($scope.programstaken.completed)/($scope.programstaken.required)*100).toFixed(2);
}

到

$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';
};

关于javascript - Angular Bootstrap 应用程序中的进度条错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23158303/

javascript - Angular Bootstrap 应用程序中的进度条错误

上一篇：javascript - 对 EmberJS 应用程序进行单元测试(实际单元测试)

下一篇：JavaScript:暂停计时器