如何在 ng-repeat中启动每个函数
How to initiate forEach function inside ng-repeat
我想在ng-repeat
上运行一个函数,该函数在我的JSON中获取Qprogress对象的值并将其转换为百分比。我正确编写了函数,但我不知道如何启动它。我试图将其包装在作用域内的 forEach 中,然后将作用域用作我要修改的元素的 ng-model,但它不起作用。这是 HTML:
<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": "bjohson@ti.com"
谢谢!
我不知道你需要计算什么,但我认为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>
我没有测试它,但应该是工作或帮助!
我处理它的方式,特别是如果您的计算只需要每个项目发生一次,是从控制器运行该方法作为回调。
$http.get('assets/js/lib/angular/clientList.json').success(function (data) {
$scope.clients = data;
$scope.clients.forEach(function(client) {
//your calculations here.
});
});
如果你真的需要从html运行代码,那么你我会参考@manzapanza留下的答案
相关文章:
- 为什么我的控制器没有启动函数.js脚本
- 如何在JavaScript中启动键盘快捷键函数
- 如何在Javascript中设置函数在上一次结束时启动
- 防止Javascript函数多次启动
- 无法从html onclick启动javascript函数
- 节点 js 在启动时调用函数一次
- jQuery stopPropagation - 函数再次启动
- onclick启动打开弹出窗口的javascript-不确定函数调用
- 当浏览器自动填充表单字段时,$parsers$formatters函数不会启动
- Jquery函数在单击时启动,但我需要停止它
- 函数启动太早
- 我们如何在jQuery Datatable调用结果中启动另一个jQuery插件,而不是页面就绪函数
- JavaScript未启动函数
- 函数未以编程方式启动.click()
- 如何从另一个函数启动一个 JavaScript 函数
- 如何通过单击取消javascript函数启动的定时重定向
- 使用Javascript函数启动下载
- 如果其他函数没有通过,如何防止函数启动
- 表单验证不是一个函数-启动日期选择器
- post - back后调用java-script函数启动flash游戏