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

我对angularJS是新手，正在为一个问题而挣扎。我已经广泛地搜索了一个答案，并尝试了一些肮脏的黑客，但我仍然无法解决这个问题

我有一个ng repeat指令，它从工厂的my controller获取显示数据。然而，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-->  

这是工厂：

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中删除

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

---

Ed

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

您可以从angular的作用域中指定id属性值，如下所示：

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

---

2.您可以编写一个使用jquery或您选择的任何工具操作dom的程序

你好，迈克尔。谢谢你的回答。我很清楚角度表达式，但我试图在脚本块内部使用它。您提供的答案是针对HTML标记的，当您尝试在javascript中引用角度表达式时，会出现由{{}引起的错误。希望这有意义？谢谢，你为什么要这么做？它与angular的整个绑定点相反。您可以使用一个指令，并在其中使用Jquery或任何您想要的方式操纵dom，这将提供您试图强制使用的语法。嘿，您甚至可以不用使用普通jquery的指令来实现这一点。不过，除非你有充分的理由，否则这两种选择都是不好的做法。嗨，MichaelLo，谢谢你的另一个答案。我的progressbar需要在JS中设置的值。我知道的还不够多，无法在这一点上进行设置。我无法在脚本块中使用角度表达式，因此无法确定如何设置它。即使我将其移动到控制器并试图操纵DOM，我不知道会有多少progressbar，因为它们是由ng repeat动态创建的，我不知道progressbar的ID，我不知道如何根据我的代码将与每个progressbar相关的值从ng repeat数据集成员详细信息中分离出来。我不能在脚本块中使用角度表达式，所以我无法计算出什么这意味着什么？您不能在代码中使用角度{{}括号？角度表达式{{{something.value}}仅在HTML标记中有效，在Javascript中无效。如果你看一下我的代码附件，你会在我的部分中看到，在HTML中定义了进度条之后，打开了一个脚本标记，并且在脚本块中设置了值。但是脚本标记中不允许使用大括号，因此{{memberDetails.verPercent}}会中断应用程序。

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