在 AngularJS 中触发 Click 事件时添加 ng-class答案

【问题标题】：Add ng-class when Click event triggered in AngularJS在 AngularJS 中触发 Click 事件时添加 ng-class
【发布时间】：2015-11-20 17:07:30
【问题描述】：

我创建简单的应用程序。我添加了评级功能。当从控制器触发点击事件时，我想更改评级星级。

在我的控制器中，我检查对象的评级是否 == 从视图中传递的数字，我返回类名 active。

在那之后，我仍然对如何传递返回值感到困惑。

这是我的观点

<h3>{{ fruit.title }}</h3>
                <div class="rating">
                    <ul>
                        <li ng-click="addRating(1,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
                        <li ng-click="addRating(2,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
                        <li ng-click="addRating(3,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
                        <li ng-click="addRating(4,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
                        <li ng-click="addRating(5,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
                    </ul>
                </div>

这是我的控制器：

var app = angular.module('totalBuahApp', []);

app.controller('fruitController', function($scope) {
    $scope.fruits = [
        {
            title : 'Fresh Red Apple',
            img : 'https://cdn0.iconfinder.com/data/icons/fruits/512/Apple.png',
            description : 'Good for your daily consumption.',
            price : 15000,
            cartQty : 1,
            rating : 0
        },
        {
            title : 'Red Grape',
            img : 'http://www.freepngimg.com/thumb/grape/4-grape-png-image-download-picture-thumb.png',
            description : 'Like a king.',
            price : 34000,
            cartQty : 1,
            rating : 0
        }
    ];

    $scope.total = $scope.fruits.length;

    $scope.addRating = function(number, fruit) {
        fruit.rating = number;
    };

    $scope.ratingClass = function(number) {
        return (number == $scope.rating) ? "active" : "";   
    };
});

你可以查看我的完整代码 https://codepen.io/fanjavaid/pen/MaRWgG

【问题讨论】：

标签： javascript css angularjs ng-class

【解决方案1】：

不要为每个星重复 HTML，使用 ngRepeat 和 ngClass：

<div class="rating">
    <ul>
        <li class="glyphicon glyphicon-star-empty"
            ng-click="addRating($index + 1, fruit)"
            ng-repeat="star in [0, 1, 2, 3, 4]"
            ng-class="{active: fruit.rating >= $index + 1}"></li>
    </ul>
</div>

演示： https://codepen.io/anon/pen/RWOPad?editors=101

【讨论】：

:D 是的，谢谢您的建议。但我仍然不明白这一行{active: fruit.rating >= $index + 1}。请向我解释那行^^。
这是通常的ngClass 语法。意味着，当满足fruit.rating >= $index + 1 条件时，将类设置为“活动”。 $index 是 ngRepeat 在每次迭代中设置的值。

【解决方案2】：

用下面的 div 替换你的评分 div

    <div class="rating">
       <ul>
           <li ng-click="addRating(1,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 1}"></i></li>
           <li ng-click="addRating(2,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 2}"></i></li>
           <li ng-click="addRating(3,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 3}"></i></li>
           <li ng-click="addRating(4,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 4}"></i></li>
           <li ng-click="addRating(5,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 5}"></i></li>
     </ul>

并在您的 css 中添加 .active 类。

【讨论】：