I have a servlet that returns a JSON object with a parameter named "valoracion" and I want to use it for a span label to be a css class with the name of the value associated to that parameter. This I want to do it to show a .gif in a different way depending on this class. I'm using AngularJS, btw.
This is the js code from the "novedades" page controller:
angular.module('myApp')
.controller('novedadesCtrl', [ '$scope','auth', 'novedadesService', function($scope,auth,novedadesService){
$scope.mostrar = ["Comentarios","Valoraciones"];
$scope.novedades = "Comentarios";
$scope.novedadesComentarios;
$scope.novedadesValoraciones;
$scope.cogerNovedades = function(){
debugger;
novedadesService.novedades( auth.idUser(), function(comentarios,valoraciones) {
$scope.novedadesComentarios = comentarios;
console.log(valoraciones);
$scope.novedadesValoraciones = valoraciones;
});
};
$scope.cogerNovedades();
}]);
novedadesService.novedades is a factory that sends a POST request to the servlet and returns the same JSON returned by the servlet. This is an example of the aforementioned JSON:
idJuego: 0
idUsuario: 500
juego: "Star Wars: The Old Republic"
nombreApellidos: "Gregorio de Miguel"
nombreUsuario: "Goyo"
valoracion: "cuatroEstrella"
This other one is the html code for that page:
<div class="container" id="cuerpo">
<h1 class="theme-color-text font">Novedades</h1>
<div class="row form-inline">
<div class="form-group" style="float: right;">
<label for="mostrar">Mostrar: </label>
<select id="mostrar" class="form-control" ng-model="novedades"
ng-options="x for x in mostrar">
</select>
</div>
</div>
<!-- lista de novedades de comentarios -->
<div ng-if="novedades == 'Comentarios'" class="row">
<ul class="list-group" id="novedades">
<li class="list-group-item" ng-repeat="comentario in novedadesComentarios">
<a href="" class="theme-color-text-action">{{comentario.nombreUsuario}}</a>
({{comentario.nombreApellidos}}) ha comentado el juego
<a href="" class="theme-color-text-action">{{comentario.juego}}</a></li>
</ul>
</div>
<!-- lista de novedades de valoraciones -->
<div ng-if="novedades == 'Valoraciones'" class="row">
<ul class="list-group" id="novedades">
<li class="list-group-item" ng-repeat="valoracion in novedadesComentarios">
<a href="" class="theme-color-text-action">{{valoracion.nombreUsuario}}</a>
({{valoracion.nombreApellidos}}) ha valorado el juego
<a href="" class="theme-color-text-action">{{valoracion.juego}}</a>
con <span ng-class="{{valoracion.valoracion}}"></span></li>
</ul>
</div>
This is the part where I have the problem:
<span ng-class="{{valoracion.valoracion}}"></span>
The following is an example from the css we want the page to show:
.cuatroEstrella{
display: inline-block;
margin-bottom: -10px;
width: 100px;
height: 30px;
background: url("../img/valoracion.gif") 0 -262px;
}
Here you have a screenshot from the page. You can see the problem in the developers console.
I appreciate any help you can provide on this issue.
Bad copy/paste ;). You are iterating through 'novedadesComentarios' instead through 'novedadesValoraciones'. You are doing this:
<li class="list-group-item" ng-repeat="valoracion in novedadesComentarios">
<a href="" class="theme-color-text-action">{{valoracion.nombreUsuario}}</a>
({{valoracion.nombreApellidos}}) ha valorado el juego
<a href="" class="theme-color-text-action">{{valoracion.juego}}</a>
con <span ng-class="{{valoracion.valoracion}}"></span>
</li>
And I think you want to do this:
<li class="list-group-item" ng-repeat="valoracion in novedadesValoraciones">
<a href="" class="theme-color-text-action">{{valoracion.nombreUsuario}}</a>
({{valoracion.nombreApellidos}}) ha valorado el juego
<a href="" class="theme-color-text-action">{{valoracion.juego}}</a>
con <span ng-class="valoracion.valoracion"></span>
</li>
I had forgotten to say that you still have to do what @Mike Vranckx said and remove the {{}}