javascript - AngularJS 在重复 block 之外和脚本标记中使用 ng-repeat 值

Question

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

我有一个 ng-repeat 指令，它从我的 Controller (来自工厂)获取显示数据。然而 ng-repeat block 中的一项是 javascript 进度条，它需要在 javascript 中设置值...该值需要从 ng-repeat 数据集中提取。

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

部分 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 数据集中的值。

我的 Controller :

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 中删除脚本 block )，我也将不胜感激。

非常感谢，我们将不胜感激任何帮助。埃德

Answer 1

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

1. 您可以从 Angular 的作用域中给出 id 属性值，如下所示:

   <div id='{{valueFromScope}}' ..
   

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