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

【问题标题】：using loop variable in ng-class and ng-click attribute在 ng-class 和 ng-click 属性中使用循环变量
【发布时间】：2013-02-26 05:01:56
【问题描述】：

以下代码创建一个包含七个缩略图的列表，并且活动图像应具有 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 中的表达式不起作用？

【问题讨论】：

标签： javascript css angularjs

【解决方案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>

【讨论】：

谢谢，您的回答帮助我找到了问题和解决方案。

【解决方案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>

【讨论】：

【解决方案3】：

查看关于表达式http://docs.angularjs.org/guide/expression的文档

条件不允许：

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

解决方案是在控制器中创建一个方法。即使对于简单的事情也是如此。如果您想在许多控制器中使用它，可以将此方法添加到$rootScope。

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

【讨论】：

ngClass 允许条件。注意他有单花括号（对象）而不是双花括号（表达式）
真的吗？那么文档是误导性的。 docs.angularjs.org/api/ng.directive:ngClass链接“表达式”指向我上面链接的页面。
很好，它是一个表达式，表达式只是解析为真或假，因此本身没有流语句。