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

【问题标题】：Using a JQuery $.each Operator Within a ui.bootstrap Angular Modal To Apply CSS to Each Element在 ui.bootstrap Angular Modal 中使用 JQuery $.each 运算符将 CSS 应用于每个元素
【发布时间】：2017-12-08 04:04:54
【问题描述】：

当单击某个显示某些数字的项目时，我会弹出一个模式，我希望这些数字根据它们的数字改变颜色（即低分将是红色，高分将是绿色）。

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 函数，它返回一个字符串，该字符串是 6 个字符的颜色代码，前面带有“#”（例如“#1D3D45”）

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

我知道 JQuery 中有 $.each 运算符，我可以使用它来将其应用于每个“电影评论评级”类，但这不起作用（我认为因为模态在脚本中并且不会不能那样工作，但我可能错了）。

【问题讨论】：

标签： javascript jquery css angularjs twitter-bootstrap

【解决方案1】：

怎么样

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.rating=5;
$scope.rating1=4;
$scope.rateColor = function(rating) {
if(rating==5)
   return "background-color:"+"red";
else
  return "background-color:"+"green"
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<h2 style="{{rateColor(rating)}}">
{{rating}}
</h2>
 <h3 style="{{rateColor(rating1)}}">
{{rating1}}
</h3>
</div>

【讨论】：

天哪，非常感谢。效果很好！