Question

我想在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"

谢谢！

Answer 1

我不确切知道您需要计算什么，但我认为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>

我没有对它进行测试，但应该有效或有帮助！

Answer 2

＆＃13;

$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 + '%');
    }
    };
});

＆＃13;

Answer 3

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

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

如果你真的需要从html运行代码，那么我会参考@manzapanza留下的答案

如何在ng-repeat中启动每个函数

3 个答案: