0

「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 は、POST 要求をサーブレットに送信し、サーブレットから返されたものと同じ JSON を返すファクトリです。これは、前述の JSON の例です。

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

このもう 1 つは、そのページの 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

1

悪いコピー/貼り付け;)。「novedadesValoraciones」ではなく「novedadesCommentarios」を反復処理しています。あなたはこれをやっています：

<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 に答える