Question

我有一个servlet，它返回一个JSON对象，其参数名为＆＃34; valoracion＆＃34;我想将它用作span标签，使其成为一个css类，其名称与该参数相关联。我想这样做是为了以不同的方式显示.gif，具体取决于这个类。我正在使用AngularJS，顺便说一句。

这是来自＆＃34; novedades＆＃34;的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是一个工厂，它向servlet发送POST请求并返回servlet返回的相同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

错误复制/粘贴;）。你正在通过'novedadesCoalarios'而不是通过'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的参数

2 个答案:

更新