以下代码创建七个缩略图的列表，事件图像应具有类 active (和 thumb)。
<div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]">
<img ng-src="images/{{no}}t.jpg"
class="thumb" ng-class="{'active': imgNumber == no}" ng-click="change(no)"/>
</div>
图像显示正确，但类 active 未应用于当前选定的图像，并且单击时图像不会更改。
这是 Controller :
function Gallery($scope) {
$scope.imgNumber = "1";
$scope.change = function(imgNumber) {
$scope.imgNumber = imgNumber;
}
}
如果我展开循环并将 no 替换为当前图像编号，一切都会按预期工作。
为什么 ng-class 和 ng-click 中的表达式不起作用？
最佳答案
我看不出有什么问题。我尝试用这个 jsFiddle 来模拟它:http://jsfiddle.net/63xze/它似乎按预期工作。您可以编辑 jsFiddle 来说明您的问题吗？
由于我无法在没有代码的情况下发布 jsFiddle，因此我的 jsFiddle 如下所示:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function($scope){
$scope.imgNumber = "1";
$scope.change = function(imgNumber) {
$scope.imgNumber = imgNumber;
}
}]);
</script>
<style>
.img {
background: red;
width: 15px;
height: 15px;
}
.img.active {
background: black;
}
</style>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]">
<div class="img" class="thumb" ng-class="{'active': imgNumber == no}" ng-click="change(no)">{{no}}</div>
</div>
</body>
</html>
关于javascript - 在 ng-class 和 ng-click 属性中使用循环变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15062111/