Question

我是angularJS的新手，正在努力解决问题。我已经广泛搜索了一个答案，并尝试了一些肮脏的黑客攻击，但我仍然无法解决问题。

我有一个ng-repeat指令，用于显示来自我的控制器（来自工厂）的数据。然而，ng-repeat块中的一个项目是一个javascript进度条，它需要在javascript中设置值...这个值需要从ng-repeat数据集中提取。

目前HTML中包含一个脚本块，其中包含要设置的值（我确信这不是推荐的实现此方法的方法，如果有人能指出我朝向正确的方向，我将不胜感激如何通过最佳实践实现这一目标）。我的问题是我不能在脚本块中使用角度表达式，所以我不知道如何设置值，我相信所有必要的代码如下：

部分HTML：

<div class="row-fluid" ng-repeat="memberDetail in memberDetails" ng-cloak>
        <div id="dashboard-left" class="span12">
            <h4 class="widgettitle">{{memberDetail.MemberName}}</h4>
                <div class="widgetcontent nopadding">
                    <ul class="commentlist">
                        <li>
                            <img src="images/saica-logo.jpg" alt="" class="pull-left" />
                            <div class="comment-info">
                                <div style="height: 150px">                                               
                                    <span style="position: absolute;"><h5>Cycle</h5></span><div id="progressBar1" class="default"><div></div></div><h5 style="float: right; margin-top: -30px">3yr Cycle</h5>
                                    <span style="position: absolute;"><h5>Ver</h5></span><div data-percent=50 id="progressBar2" class="default1"><div></div></div><h5 style="float: right; margin-top: -30px">60 Hours</h5>
                                    <span style="position: absolute;"><h5>NonVer</h5></span><div id="progressBar3" class="default2"><div></div></div><h5 style="float: right; margin-top: -30px">60 Hours</h5>
                              <div id="PBValue" style="">{{memberDetail.verPercent}}</div>                                                               
                                </div>                       
                    <script>
                        //The progress bar values need to be set here.                        
                        progressBar(70, $('#progressBar1'));
                        progressBar(70, $('#progressBar2')); //memberDetail.verPercent
                        progressBar(40, $('#progressBar3')); //memberDetail.NonVerPercent
                    </script>
                    <span  style="float: left; margin-top: -15px; ">
                        <h6><em>*You need {{60 - memberDetail.VerHours}} CPD hours over the next 3 months  </em></h6> 
                        <h6><em>*You need {{60 - memberDetail.NonVerHours}} hours of learning 3 months</em></h6>                                                           
                    </span><br>
                    <span  style="float: right; margin-top: -30px; ">
                        <button id="opendialog" class="btn btn-warning btn-rounded">Log Verifiable CPD</button>
                        <button id="opendialog" class="btn btn-warning btn-rounded">Log non-verifiable CPD</button>
                        <button id="opendialog" class="btn btn-warning btn-rounded">Get SAICA CPD</button>
                    </span>
                </div>
                    </li>                                                  
                </ul>
            </div>                                                                      
    </div><!--span12-->       
</div><!--row-fluid-->

我添加了一条评论，以显示需要设置进度条值的位置以及ng-repeat数据集中的值。

我的控制器：

memberDetailsApp.controller('ctrlrMemberDetails', function($scope, fctryMemberDetails)
{       
fctryMemberDetails.getMemberDetails(function(details)
{
    $scope.memberDetails = details;
});
});

这是工厂：

memberDetailsApp.factory('fctryMemberDetails',['$http', function($http)
{               
var MemberDetailsFactory = {};

MemberDetailsFactory.getMemberDetails = function(successcb)
{                                                   
    $http({method: 'GET', url: 'data/memberDetails.json'})
    .success(function(data, status, headers, config)
    {                                                                   
        successcb(data);    
        console.log(data);              
    })                      
};              
return MemberDetailsFactory;
}]);

如果需要，这里是json文件的内容：

[
 {
    "MemberName":"SAICA",
    "VerHours":"24",
    "verPercent":"60",
    "NonVerHours":"12",
    "NonVerPercent":"30"
 },
 {
    "MemberName":"IRBA",
    "VerHours":"30",
    "verPercent":"75",
    "NonVerHours":"40",
    "NonVerPercent":"100"
 }
]

有人可以告诉我如何使用ng-repeat数据集中的数据设置进度条值吗？我也很感激，如果有人能告诉我正确的方法来实现这一点（假设脚本块应该从部分的html中删除）。

非常感谢，任何帮助将不胜感激。编

Answer 1

不确定我是否完全理解你，但这可能会给你一个方向：

您可以从角度范围中提供id属性值，如下所示：
```
<div id='{{valueFromScope}}' ..
```

2.你可以写一个directive用jquery或你选择的任何东西操纵dom。

AngularJS使用重复块之外和脚本标记中的ng-repeat值

1 个答案: