У меня есть таблица с различными элементами 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.
Например, в этом случае у меня есть только один зеленый цвет, а остальные - красный. Но напечатайте все зеленые.
В вашей функции 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
Ваш код ужасен, но в любом случае вы не можете
$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 к каждому объекту на итерации....