如何在ng-repeat内部启动forEach函数

我想在ng-repeat上运行一个函数，该函数在我的JSON中获取Qprogress对象的值并将其转换为百分比。我有正确写入的功能，但我无法弄清楚如何启动它。我尝试将它包装在范围内的forEach中，然后使用范围作为要修改的元素的ng模型，但它不起作用。这里的HTML：如何在ng-repeat内部启动forEach函数

<tr ng-repeat="item in clients" progressCalc> 
    <td> 
     <a href="#/details/{{clients.indexOf(item)}}" title="Link to {{item.FirstName}} {{item.LastName}}" class="oly-open">{{item.FirstName}} {{item.LastName}}</a> 
    </td> 
    <td ng-hide="item.Progress == 'In Progress'" ng-class="{ 'status-success': item.Progress == 'Questionnaire Completed', 'status-error': item.Progress == 'Unsent'}"> 
     {{item.Progress}} 
    </td> 
    <td ng-if="item.Progress == 'In Progress'" ng-model="progressCalc" class="status-info percent"> 
     {{item.Qprogress}} 
    </td> 
    <td width="10%"> 
     <a href="#/reports/" title{{$index + 1}}="Reports" ng-show="{{item.Progress == 'Questionnaire Completed'}}"> 
      <span class="stat-icon-report"></span> 
     </a> 
     <a href="#/sends/{{$index + 1}}" title="Alert" ng-show="{{item.Progress == 'Unsent'}}"> 
      <span class="stat-icon-bullhorn"></span> 
     </a> 
     <a href="#/progress/{{$index + 1}}" title="In Progress" ng-show="{{item.Progress == 'In Progress'}}"> 
      <span class="stat-icon-phone"></span> 
     </a> 
    </td> 
</tr>

而且JS：

myApp.controller('clientStatus', ['$scope', '$http', function($scope, $http) { 
    $http.get('assets/js/lib/angular/clientList.json').success(function(data) { 
     $scope.clients = data; 

     $scope.progressCalc = function() { 
      angular.forEach(function(item) { 
       var m = 0.26664; 
       var s = 0.26664; 
       var i = 0.694375; 
       var t = item.Qprogress; 
       t = t.replace(/m/g,''); 
       t = t.replace(/s/g,''); 
       t = t.replace(/i/g,''); 
       var ta = t.split("/"); 
       var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i); 
       tTotal = Math.round(tTotal); 
       $('.percent').append(tTotal + '%'); 
      }); 
     }; 
    }); 
}]);

而且JSON格式的片段：

"FirstName": "Bill", 
"LastName": "Johnson", 
"Company": "Texas Instruments", 
"CompanyId": "2345672", 
"ClientId": "EFTGE6", 
"Title": "CIO", 
"Phone": "555-555-5555", 
"ClientSystemStatus": "Active", 
"CreationDate": "06/03/2015, 10:35:59 am", 
"Progress": "In Progress", 
"Qprogress": "m125/s40/i0", 
"Email": "[email protected]"

谢谢！

来源

2016-02-11 Christian Hill

离开了答案那angular.forEach'不是如何'工作。第一个参数是可迭代的，第二个是函数，第三个是上下文。在你的情况下，你想'angular.forEach（$ scope.clients，function（item）{...}）;' 这也只是为了显示？可能要考虑使用过滤器。 –

我不知道你需要计算什么，但我认为forEach不是必需的。所以我做了一些修改/修复，看看。

控制器：

$http.get('assets/js/lib/angular/clientList.json').success(function(data) { 
    $scope.clients = data; 
}); 

$scope.progressCalc = function(item) { 
    var m = 0.26664; 
    var s = 0.26664; 
    var i = 0.694375; 
    var t = item.Qprogress; 
    t = t.replace(/m/g,''); 
    t = t.replace(/s/g,''); 
    t = t.replace(/i/g,''); 
    var ta = t.split("/"); 
    var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i); 
    tTotal = Math.round(tTotal); 
    return tTotal + '%'; 
};

HTML：

讲究的第一行：我删除了错误的指令调用progressCalc。下面还有更多的内容，例如，我打电话给打印结果的方法progressCalc。

<tr ng-repeat="item in clients"> 
    <td> 
     <a href="#/details/{{clients.indexOf(item)}}" title="Link to {{item.FirstName}} {{item.LastName}}" class="oly-open">{{item.FirstName}} {{item.LastName}}</a> 
    </td> 
    <td ng-hide="item.Progress == 'In Progress'" ng-class="{ 'status-success': item.Progress == 'Questionnaire Completed', 'status-error': item.Progress == 'Unsent'}"> 
     {{item.Progress}} 
    </td> 
    <td ng-if="item.Progress == 'In Progress'" class="status-info percent"> 
     {{item.Qprogress}} {{progressCalc(item)}} 
    </td> 
    <td width="10%"> 
     <a href="#/reports/" title{{$index + 1}}="Reports" ng-show="{{item.Progress == 'Questionnaire Completed'}}"> 
      <span class="stat-icon-report"></span> 
     </a> 
     <a href="#/sends/{{$index + 1}}" title="Alert" ng-show="{{item.Progress == 'Unsent'}}"> 
      <span class="stat-icon-bullhorn"></span> 
     </a> 
     <a href="#/progress/{{$index + 1}}" title="In Progress" ng-show="{{item.Progress == 'In Progress'}}"> 
      <span class="stat-icon-phone"></span> 
     </a> 
    </td> 
</tr>

我没有测试它，但应该是作品或帮助！

来源

2016-02-11 19:35:36 manzapanza

你摇滚！我也会尝试以上内容，但是急于完成此操作并需要快速修复。谢谢！ –

$scope.progressCalc = function() { 
 
     angular.forEach(function(item) { 
 
      var m = 0.26664; 
 
      var s = 0.26664; 
 
      var i = 0.694375; 
 
      var t = item.Qprogress; 
 
      t = t.replace(/m/g,''); 
 
      t = t.replace(/s/g,''); 
 
      t = t.replace(/i/g,''); 
 
      var ta = t.split("/"); 
 
      var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i); 
 
      tTotal = Math.round(tTotal); 
 
      $('.percent').append(tTotal + '%'); 
 
     }); 
 
    }; 
 
}); 
 

 
//change your $scope.progressCalc to as below mentioned 
 

 
$scope.progressCalc = function() { 
 
    
 
    for(var item in data){ // is equalent to angular.forEach 
 
    
 
      var m = 0.26664; 
 
      var s = 0.26664; 
 
      var i = 0.694375; 
 
      var t = item.Qprogress; 
 
      t = t.replace(/m/g,''); 
 
      t = t.replace(/s/g,''); 
 
      t = t.replace(/i/g,''); 
 
      var ta = t.split("/"); 
 
      var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i); 
 
      **tTotal = Math.round(tTotal) + '%'; 
 
    
 
     item.percent = tTotal; //now you can bind percent directly no need to find and set value by $('.percent').append(tTotal + '%'); 
 
    } 
 
    }; 
 
});

来源

2016-02-11 19:37:40

我想接近它，特别是如果你的计算只需要每个项目发生一次的方式，是从你的控制器作为回调运行的方法。

$http.get('assets/js/lib/angular/clientList.json').success(function (data) { 
    $scope.clients = data; 
    $scope.clients.forEach(function(client) { 
     //your calculations here. 
    }); 
});

如果你真的需要运行从HTML的代码，那么你我要提到的@manzapanza

来源

2016-02-11 19:45:11 adam

如何在ng-repeat内部启动forEach函数

回答

相关问题