0

我有一个 servlet，它返回一个带有名为“valoracion”的参数的 JSON 对象，我想将它用于跨度标签，使其成为一个带有与该参数关联的值的名称的 css 类。我想这样做是为了根据这个类以不同的方式显示 .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 是一个工厂，它向 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;
}

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

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

4

2 回答 2

2

不需要使用{{}}，就像这样：

<span ng-class="valoracion.valoracion"></span>
于 2016-03-25T13:18:20.377 回答
1

错误的复制/粘贴；）。您正在通过“novedadesCommentarios”而不是“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 所说的操作并删除{{}}

于 2016-03-25T13:44:20.393 回答