Question

I have a table with the different elements of ng-repeat. And the json returns me a date which i compare with the actual date and if is less than 72 hours i return a square green and if not red. For this I pass all the elements in a function but only return me the last value in all the cell and print all of the same color. The function is getHour, the other is working.

var app = angular.module('dashboard', ['ui.bootstrap','ngSanitize']);

app.controller('dashboardController', function ($scope, $http, $modal, $sce, $sanitize) {


    $scope.getHour= function (input){
//console.log(input);
        var datos = input;

input.forEach(function(data){

console.log(data);
    var date1 = new Date();
    var date2 = new Date(data.LastHWEvent);
    var date3 = new Date(data.LastTestEvent)
    var timeDiff = Math.abs((date1.getTime() - date2.getTime())/(1000*60*60));
    var timeDiff2 = Math.abs((date1.getTime() - date3.getTime())/(1000*60*60));
    if (timeDiff <= 72 || timeDiff2 <= 72) {
        console.log("verde");
        $scope.html =
            '<span class="fa fa-square fa-3x"style="color:lime"></span>';
        return $scope.trustedHtmlred =$sce.trustAsHtml($scope.html);


    }
    else {
        console.log("rojo");
        $scope.html = '<span class="fa fa-square fa-3x"style="color:red"></span>';
        return $scope.trustedHtmlred = $sce.trustAsHtml($scope.html);


    }

})



    }



    $scope.objects = [];
    $scope.grupos = [];
    $scope.longitud = [];
    $scope.eventos = [];


//Funci?n que devuelve las instalaciones de un usuario
    $http.get(URLOperation, $scope)
            .success(function (data) {
                var groups = data;
                angular.forEach(groups, function (group) {
                    var group2 = group;
                    angular.forEach(group2.sites, function (group3) {
                        $scope.longitud.push(group3);
                        $scope.objects.push(group3);
                        $scope.predicate = 'msisdn';
                        $scope.reverse = true;
                        $scope.order = function (predicate) {
                            $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
                            $scope.predicate = predicate;
                        };
                    })
                });
            })
            .error(function (data) {
                window.alert('Something Wrong...');
            });



});

Code Html

<table id="tableinventario" class="table table-bordered table-hover table-responsive table-striped dataTable no-footer" data-sort-name="name" data-sort-order="desc">
                            <tr role = "row" class="info text-center">
                                <th ng-click="order('msisdn')">Número Teléfono</th>
                                <th ng-click="order('icc')">ICC</th>

                                <!--th>IMEI</th-->
                                <th ng-click="order('ActivationStatus')">Estado</th>
                                <th ng-click="order('sitename')">Instalación</th>
                                <th ng-click="order('siteaddress')">Dirección</th>
                                <th ng-click="order('sitecity')">Ciudad</th>
                                <th ng-click="order('sitezip')">Código Postal</th>

                                <th ng-click="order('phonedesc')">Modelo Teléfono</th>

                                <th >EN-8128</th>

                            </tr>


                            <tr class=" text-center" ng-repeat-start="object in filteredsites = (objects | filter:searchText | filter:{parentgroupid:selectedgroup||undefined}) | filter:tableFilter| orderBy:predicate:reverse" ng-click="showDetails = ! showDetails" >
                                <td>{{object.msisdn}}</td>
                                <td>{{object.icc}}</td>

                                <!--td>{{object.ActivationStatus}}</td-->
                                <td><span ng-init="countestatus(filteredsites)"  ng-show="object.ActivationStatus=='AC' && object.ContractingMode=='0'" class="fa fa-square fa-3x"style="color:lime"></span><span ng-show="object.ContractingMode=='2' && object.ActivationStatus=='AC'  "  ><img src="../img/Vodafone_logo.png" width="40" height="40" style="background-color: lime"></span><span ng-show="object.ActivationStatus=='PA'"  class="fa fa-square fa-3x"style="color:yellow"></span><span ng-show="object.ActivationStatus=='DE'" class="fa fa-square fa-3x"style="color:red"></span></td>
                                <td>{{object.sitename}}</td>
                                <td>{{object.siteaddress}}</td>
                                <td>{{object.sitecity}}</td>
                                <td>{{object.sitezip}}</td>
                                <td ng-init="getPhoneModel(filteredsites)">{{model}}</td>

                                <td  ng-bind-html="trustedHtmlred" ng-bind-html="trustedHtmlgreen">{{getHour(filteredsites)}}</td>




                            </tr>

                            <tr ng-repeat-end ng-show="showDetails">                                    
                            <td colspan="2"> <a> Teléfono</a> <div>{{object.msisdn}}</div><a>ICC:</a> <div> {{object.icc}}</div> <div><a> IMEI</a> {{object.imei}}</div> <div><a> Último Evento HW</a> {{object.LastHWEvent | date:'MM-dd-yyyy HH:MM:ss'}}</div></td>
                                <td colspan="3"> <a> ID Instalación</a> <div>{{object.liftsiteid}}</div><a>Dirección:</a> <div> {{object.siteaddress}}</div> <div><a> Código Postal</a> {{object.sitezip}}</div> <div><a> Ciudad</a> {{object.sitecity}}</div></td>

                                <td colspan="2"> <a>Modelo Teléfono</a><div></div><a>Comentarios:</a> <div> {{object.comments}}</div> </td>
                                <td colspan="2"> <div><a> Rae1: </a> {{object.rae1}}</div>  <div><a> Rae2: </a> {{object.rae2}}</div> <a>Pin1:</a> <div> {{object.pin1}}</div> <div><a> Pin2: </a> {{object.pin2}}</div></td>

                                <td colspan="1"> <div> <button class="btn btn-info" ng-click="open(object)">Eventos</button></div>  </td>
                                <div >



                                </div>
                            </tr>




                        </table>

Where i have the problem is in the column EN-8128.

For example in this case i only have one green and the others are red. But print me all green. enter image description here

Answer 1

在你的getHour函数中，你设置全局变量（$ scope.trustedHtmlred和$ scope.trustedHtmlgreen），这就是为什么最后一个值应用于所有行。

您应该将该值设置为您的对象：

input.lessThan72h = getHour(input); // true or false

然后在您的HTML中，例如：

<td><span class="fa fa-square fa-3x"
    ng-style="{color: input.lessThan72h ? 'lime' : 'red'"></span></td>

甚至更好地使用CSS类

Answer 2

你的代码很糟糕，但无论如何，你不能

$scope.trustedHtmlgreen = $sce.trustAsHtml($scope.html);

你只有一个全局范围，angular如何知道它属于实际的重复项目？基本上现在你已经处于最后一次控制迭代的html状态。但你可以做到

input.trustedHtmlgreen = $sce.trustAsHtml($scope.html);

模板

 <td ng-init="getHour(filteredsites)"  ng-bind-html="object.trustedHtmlred" ng-bind-html="object.trustedHtmlgreen"></td>

将html附加到迭代中的每个对象....

angular call function ng-repeat

2 个答案: