Question

我正在为每个对象设备执行进度条。

这是我的AngularJS代码：

$scope.progressBarEquipements=function(idEquipement) {

     $http.get(url+"/RestResponseCheckLists?idEq="+idEquipement)
     .success(function(data) {
             $scope.Pourcentage = data;
      }).error(function(err, data) {
            console.log("error : " +data);
    }); 
};

此函数返回$scope.progressBarEquipements=function(idEquipement)：

console.log("data "+Pourcentage);
/**
* [{'NB_Resp':2,'NB_checks':154}]  //For the first object And the others not
*/

这是我的HTML代码：

<div class="col-md-4" ng-repeat="eq in Checksf" ng-init="progressBarEquipements(eq.idEquipements)">
          <h4 class="list-group-item-heading" >{{eq.nomEq}} </h4>  
        <div class="progress progress-lg m-b-5" >
               <div class="progress-bar progress-bar-purple" role="progressbar" ng-repeat="p in Pourcentage" ng-style="{width:{{((p.NB_Resp/p.NB_checks) * 100)}} + '%'}">
                  {{((p.NB_Resp/p.NB_checks) * 100) | number:0}}%
           </div>
     </div>                
</div>

所以我在html页面中显示了四项设备。

$scope.Percentage显示的进度条计算仅限第一个对象。

如何在进度条中为每个对象显示其计算结果？

提前谢谢

Answer 1

虽然，我不喜欢您使用ng-init的方式，但以下情况应该有效：

$scope.progressBarEquipements=function(eq) {

     $http.get(url+"/RestResponseCheckLists?idEq="+ eq.idEquipement)
     .success(function(data) {
         eq.Pourcentage = data;
      }).error(function(err, data) {
            console.log("error : " +data);
    }); 
};

<div class="col-md-4" ng-repeat="eq in Checksf" ng-init="progressBarEquipements(eq)">
          <h4 class="list-group-item-heading" >{{eq.nomEq}} </h4>  
        <div class="progress progress-lg m-b-5" >
               <div class="progress-bar progress-bar-purple" role="progressbar" ng-repeat="p in eq.Pourcentage"  ng-style="{width:{{((p.NB_Resp/p.NB_checks) * 100)}} + '%'}">
                  {{((p.NB_Resp/p.NB_checks) * 100) | number:0}}%
           </div>
     </div>                
</div>

这个想法是将您的函数“progressBarEquipements”发送给完整的设备对象。这样，您就可以在服务器响应时更新它。

我不喜欢使用ng-init的方法，因为 - 您的视图的行为有点隐藏在您的控制器和模板之间。 - 如果必须这样做，我的API会给viewmodel包含我需要显示的所有信息。

如何查看所有ng-init内容？

1 个答案: