функция углового вызова повтора

0

У меня есть таблица с различными элементами ng-repeat. И json возвращает мне дату, которую я сравниваю с фактической датой, а если менее 72 часов, я возвращаю квадратный зеленый, а если не красный. Для этого я передаю все элементы в функции, но возвращаю только последнее значение во всей ячейке и печатаю все одинаковые цвета. Функция getHour, другая работает.

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...');
            });



});

Код 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>

Где у меня проблема, находится в колонке EN-8128.

Например, в этом случае у меня есть только один зеленый цвет, а остальные - красный. Но напечатайте все зеленые. Изображение 174551

Теги:

2 ответа

2

В вашей функции 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

1

Ваш код ужасен, но в любом случае вы не можете

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

У вас есть только один глобальный масштаб, как угловой знает, что он принадлежит фактическому ng-повторному элементу? В основном теперь у вас есть статус html последней итерации controlelr. Но вы можете сделать

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

шаблон

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

Что будет прикреплять html к каждому объекту на итерации....

Ещё вопросы

Сообщество Overcoder
Наверх
Меню