Question

以下代码创建了七个缩略图的列表，活动图像应该包含班级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未应用于当前所选图像，并且点击时图像不会更改。

那是控制器：

function Gallery($scope) {
    $scope.imgNumber = "1";
    $scope.change = function(imgNumber) {
        $scope.imgNumber = imgNumber;
    }
}

如果我展开循环并用当前图像编号替换no，一切都按预期工作。

为什么ng-class和ng-click中的表达式不起作用？

Answer 1

我看不出有什么问题。我试图用这个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>

Answer 2

问题因此解决方案不在我的例子中：

<p ng-controller="Gallery"> <!-- p can not contain div! -->
    <img ng-src="images/{{imgNumber}}.jpg"/>
    <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>
</p>

问题是<p>标记，其中包含<div>只是非法嵌套的内容！

如果我用p替换div，一切都按预期工作。

<div ng-controller="Gallery">
    <img ng-src="images/{{imgNumber}}.jpg"/>
    <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>
</div>

Answer 3

查看有关表达式http://docs.angularjs.org/guide/expression

的文档

不允许条件：

无控制流语句：您无法在角度表达式中执行以下任何操作：条件，循环或抛出。

解决方案是在控制器中创建一个方法。即使是像平等一样简单的东西。如果要在许多控制器中使用此方法，可以将此方法添加到$rootScope。

另一方面，如果您确实希望运行任意JavaScript代码，则应将其设为控制器方法并调用该方法。

在ng-class和ng-click属性中使用循环变量

3 个答案: