2

以下代码创建了一个包含七个缩略图的列表，并且活动图像应该具有类active(and 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为什么and中的表达式不起作用ng-click？

4

3 回答 3

3

我看不出有什么问题。我试图用这个 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>
于 2013-02-25T07:57:05.150 回答
0

问题和解决方案超出了我的示例：

<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>
于 2013-02-25T21:01:56.137 回答
-1

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

不允许的条件：

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

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

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

于 2013-02-25T14:03:21.220 回答