Search code examples
angularjsangular-ng-class

ng-class expression not working with parameter coming from httpresponse

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.

Solution

  • 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>

    Update

    I had forgotten to say that you still have to do what @Mike Vranckx said and remove the {{}}