在 AngularJS 中触发 Click 事件时添加 ng-class
Add ng-class when Click event triggered in AngularJS
我创建了简单的应用程序。我添加了评级功能。
当从控制器触发点击事件时,我想更改评级星 class。
在我的控制器中,我检查对象的评级是否 == 从视图中传递了数字,我 return class 名称 active
.
在那之后,我仍然很困惑如何传递我的 return 值。
这是我的视图
<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
不要为每个星星重复 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>
将您的评分 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 class
我创建了简单的应用程序。我添加了评级功能。 当从控制器触发点击事件时,我想更改评级星 class。
在我的控制器中,我检查对象的评级是否 == 从视图中传递了数字,我 return class 名称 active
.
在那之后,我仍然很困惑如何传递我的 return 值。
这是我的视图
<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
不要为每个星星重复 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>
将您的评分 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 class