ng-class 表达式不适用于来自 httpresponse 的参数

Question

我有一个 servlet，它 returns 一个带有名为 "valoracion" 的参数的 JSON 对象，我想将它用于跨度标签 css class 以及与该参数关联的值的名称。我想根据这个 class 以不同的方式显示 .gif。我正在使用 AngularJS，顺便说一句。

这是来自 "novedades" 页面控制器的 js 代码：

 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是一个factory，向servlet发送POST请求和servlet返回的returns相同的JSON。这是前面提到的 JSON:

的一个例子

    idJuego: 0
    idUsuario: 500
    juego: "Star Wars: The Old Republic"
    nombreApellidos: "Gregorio de Miguel"
    nombreUsuario: "Goyo"
    valoracion: "cuatroEstrella"

另一个是该页面的 html 代码：

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

这是我遇到问题的部分：

<span ng-class="{{valoracion.valoracion}}"></span>

以下是我们希望页面显示的 css 示例：

.cuatroEstrella{
display: inline-block;
margin-bottom: -10px;
width: 100px;
height: 30px;
background: url("../img/valoracion.gif") 0 -262px;
}

这里有一个来自页面的 screenshot。您可以在开发人员控制台中看到问题。

感谢您在此问题上提供的任何帮助。

Answer 1

不需要使用{{}}，像这样:

<span ng-class="valoracion.valoracion"></span>

Answer 2

差 copy/paste ;)。您正在遍历 'novedadesComentarios' 而不是 'novedadesValoraciones'。您正在这样做：

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

我想你想这样做：

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

更新

我忘了说你仍然需要按照@Mike Vranckx 所说的去做并删除 {{}}

ng-class 表达式不适用于来自 httpresponse 的参数

ng-class expression not working with parameter coming from httpresponse

angularjs

angular-ng-class

更新