Question

我有以下角度应用：

<!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（）函数的值。我的错误在哪里？

Answer 1

$scope.programstaken尚未定义。

programstaken隐藏在一个名为$scope.programs的数组中，并且数组语法已被破坏。

我认为你想要的是$scope.programs成为一个对象：

$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.programs.programstaken而不是$scope.programstaken

访问它

Answer 2

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

您正在尝试访问completed数组的每个重复项目的required和programstaken属性，而不提供当前项目的引用。
< / LI>
您没有使用angular-ui progressbar directve及其属性max，value和type来操纵angular-ui的进度条
您可以将逻辑放在控制器函数中，以确定要分配给progressbar指令的type属性的百分比和进度条颜色。

解决方案：

1创建控制器功能，可以访问重复项目的当前引用，例如：添加一个参数作为此函数的引用。

2。通过使用programstaken项属性分配angular-ui进度条指令'属性，可以使用它们。考虑到我在1中提到的内容，创建一个控制器函数来确定进度条颜色。

max = required

value =已完成

type = 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';
};

角度引导应用程序中的进度条错误

2 个答案: