我有一个案例，我按日期计算，如果少于或超过72小时，视情况而定，给我一个红色正方形或绿色。事实上，我希望只看到仅用红色或绿色过滤，我不知道我该怎么做。
var app = angular.module('MainApp', ['ui.bootstrap', 'ngSanitize', 'ngRoute', 'xeditable', ]);
app.controller('dashboardController', function ($scope, $http, $modal, $sce, myfactory, allPhoneModelsFactory, allInventoryFactory) {
$scope.objects = [];
$scope.grupos = [];
$scope.longitud = [];
$scope.eventos = [];
$scope.modelos = [];
//Funci?n que devuelve las instalaciones de un usuario
$http.get(myfactory.URLOperation)
.success(function (data) {
var groups = data;
angular.forEach(groups, function (group) {
var group2 = group;
angular.forEach(group2.sites, function (oneSite) {
oneSite.phoneDescription = $scope.getPhoneDescription(oneSite.phonedesc);
$scope.longitud.push(oneSite);
$scope.objects.push(oneSite);
$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...');
});
$scope.getHour = function (input) {
var datos = input;
input.forEach(function (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) {
$scope.html1 = '<span class="fa fa-square fa-2x"style="color:#336600"></span>';
data.trustedHtmlgreen = $sce.trustAsHtml($scope.html1);
}
else {
$scope.html2 = '<span class="fa fa-square fa-2x"style="color:red"></span>';
data.trustedHtmlred = $sce.trustAsHtml($scope.html2);
}
})
}
});
为此，我使用了getHour函数。
<table id="tableinventario" class="table table-bordered table-hover table-responsive 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 <i class="fa fa-sort"></i></th>
<th ng-click="order('icc')">ICC <i class="fa fa-sort"></i></th>
<!--th>IMEI</th-->
<th ng-click="order('ActivationStatus')">Activación <i class="fa fa-sort"></i></th>
<th >EN-8128 </th>
<th ng-click="order('sitename')" >Instalación <i class="fa fa-sort"></i></th>
<th ng-click="order('siteaddress')">Dirección <i class="fa fa-sort"></i></th>
<th ng-click="order('sitecity')">Ciudad <i class="fa fa-sort"></i></th>
<th ng-click="order('sitezip')">Código Postal <i class="fa fa-sort"></i></th>
<th ng-click="order('phonedesc')">Modelo Teléfono <i class="fa fa-sort"></i></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 editable-text="object.msisdn" onaftersave="updateUser(object)">{{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-2x"style="color:#336600"></span><span ng-show="object.ContractingMode=='2' && object.ActivationStatus=='AC' " ><img src="../img/Vodafone_logo.png" width="25" height="25" style="background-color: #336600 ;border-radius: 5px"></span><span ng-show="object.ActivationStatus=='PA'" class="fa fa-square fa-2x"style="color:#FFCC33"></span><span ng-show="object.ActivationStatus=='DE'" class="fa fa-square fa-2x"style="color:#CC0000"></span></td>
<td ng-init="getHour(filteredsites)" ng-bind-html="object.trustedHtmlgreen || object.trustedHtmlred" ></td>
<td editable-text="object.sitename" ng-model="editobject.name" onaftersave="updateUser(object)">{{object.sitename}}</td>
<td editable-text="object.siteaddress" ng-model="editobject.siteaddress" onaftersave="updateUser(object)" >{{object.siteaddress }}</td>
<td editable-text="object.sitecity" ng-model="editobject.sitecity" onaftersave="updateUser(object)">{{object.sitecity}}</td>
<td editable-text="object.sitezip" ng-model="editobject.sitezip" onaftersave="updateUser(object)">{{object.sitezip}}</td>
<td>{{object.phoneDescription}}</td>
</tr>
<tr ng-repeat-end ng-show="showDetails">
<td colspan="1"></td>
<td colspan="7">
<table class="table table-striped table-bordered">
<!--<tr><td>Teléfono</td><td> {{object.msisdn}}</td><th>ID instalación</th><td> {{object.liftsiteid}}</td><th>Modelo teléfono</th><td> {{object.liftsiteid}}</td></tr>-->
<!--<tr ><th>ICC</th><td> {{object.icc}}</td><th>Dirección</th><td> {{object.siteaddress}}</td><th>PIN1</th><td> {{object.pin1}}</td></tr>-->
<tr ><th>IMEI</th><td> {{object.imei}}</td><th>PIN1</th><td editable-text="object.pin1" > {{object.pin1}}</td></tr>
<tr ><th>RAE1</th><td editable-text="object.rae1" > {{object.rae1}}</td><th>PIN2</th><td editable-text="object.pin2"> {{object.pin2}}</td></tr>
<tr ><th>RAE2</th><td editable-text="object.rae2" > {{object.rae2}}</td><td colspan="2"><button class="btn btn-outline btn-default" ng-click="open(object)" >Eventos</button></td></tr>
<tr><th>Comentarios</th><td colspan="1" editable-text="object.comments" > {{object.comments}}</td><td colspan="2"><button class="btn btn-outline btn-default" ng-click="updateUser(object.liftsiteid)" >Guardar Cambios</button></td></tr>
</table></td>
</form>
<!-- <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>
答案 0 :(得分：0)
我做了一个简单的过滤器检查plunker
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.date= "15.07.2015 10:00"
});
app.filter('passed', function() {
return function (input) {
if (input == null || input == "") {
return "";
}
var past = new Date(input).getTime();
var h72 = 1000 * 60 * 60 * 72;
var pastClass = (new Date().getTime() - past < h72) ? "red":"green";
return pastClass;
};
});
HTML
<p ng-class=" date | passed "> hello</p>
<input ng-model="date"/>