Question

当点击某个项目显示某些数字时，我会弹出一个模态，我希望这些数字根据数字的不同而改变颜色（即低分为红色，高分为绿色）。 p>

HTML

<html ng-app="root">
    <div class="movie-display-section" ng-controller="movieThumbnailController">
        <a href class="movie-thumbnail" ng-repeat="movie in movies" ng-click="show(movie)">
            <img class="movie-thumbnail-image" src="{{movie.img_src}}">
            <div class="movie-thumbnail-desc">
                <h1>{{movie.name}}</h1>
                <h2>({{movie.year}})</h2>
            </div>
        </a>
    </div>

    <script type="text/ng-template" id="movie_modal.html">
        <div class="movie-modal">
            <div class="modal-body">
                <img class="movie-thumbnail-image" src="{{movie.img_src}}">
                <div class="movie-review" ng-repeat="review in reviews">
                    <h2 class="movie-review-user">{{review.user}}</h2>
                    <h1 class="movie-review-rating" ng-class="movieRatingClass">{{review.rating}}</h1>
                </div>
            </div>
        </div>
    </script>
</html>

的JavaScript

var movies = []; //An array of movies with reviews in them
var root = angular.module('root', ['ui.bootstrap']);

root.controller("modalController", function($scope, $modalInstance, movie){
    $scope.movie = movie;
    $scope.reviews = [];
    for(var i = 0; i < 3; i++){
        $scope.reviews[i] = reviews[movie.reviews[i]];
    };
    $scope.close = function() {
        $modalInstance.close();
    };
});

root.controller("movieThumbnailController", function($scope, $timeout, $modal, $log){
    $scope.movies = movies;
    $scope.show = function(_movie){
        console.log(_movie.name);
        var modalInstance = $modal.open({
            controller: "modalController",
            templateUrl: "movie_modal.html",
            windowClass: "movie-modal",
            size: "lg",
            resolve: {
                movie: function() {
                    return _movie;
                }
            } 
        });
    };
});

显示的是一个模态，其中包含用户的名字和他们的预期评级（有些人添加了CSS来美化它）。我的问题是，有没有办法可以使用JQuery或Angular库/框架来改变JavaScript文件中评级颜色的样式？假设我有一个rateColor函数，它返回一个字符串，该字符串是前面带有＃34的＃6字符颜色代码;＃＆＃34; （例如＆＃34;＃1D3D45＆＃34;）

var rateColor = function(rating) {
    //return color string id;
}

我知道JQuery中有$ .each运算符，我可以用它来应用于每个＆＃34;电影评论评级＆＃34;但这不起作用（我认为因为模态在一个脚本中并且不会以这种方式工作但我可能错了）。

Answer 1

怎么样？

＆＃13;

List<String>

＆＃13;

String

＆＃13;

在ui.bootstrap Angular Modal中使用JQuery $ .each运算符将CSS应用于每个元素

1 个答案: