Javascript 在ng类和ng click属性中使用循环变量_Javascript_Css_Angularjs

Javascript 在ng类和ng click属性中使用循环变量

javascript css angularjs

Javascript 在ng类和ng click属性中使用循环变量,javascript,css,angularjs,Javascript,Css,Angularjs,下面的代码创建了一个包含七个缩略图的列表，并且活动图像的类应为活动（和拇指）如果我展开循环并用当前图像编号替换no，一切正常 <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"

下面的代码创建了一个包含七个缩略图的列表，并且活动图像的类应为

活动

（和

拇指

）

如果我展开循环并用当前图像编号替换

no

，一切正常

<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>

为什么不在

ng类

和

ng click

中使用表达式？

我看不出有什么问题。我试着用这个jsFiddle来模拟它：它似乎如预期的那样工作。你能编辑这个JSFIDLE来说明你的问题吗

由于我无法发布没有代码的JSFIDLE，因此我的JSFIDLE如下所示：

<!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>


var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MainCtrl'，['$scope'，函数（$scope）{
$scope.imgNumber=“1”；
$scope.change=函数（imgNumber）{
$scope.imgNumber=imgNumber；
}
}]);
.img{
背景：红色；
宽度：15px；
高度：15px；
}
.img.active{
背景：黑色；
}
{{no}}

查看有关表达式的文档

不允许出现以下情况：

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

解决方案是在控制器中创建一个方法。即使是简单的事情。如果要在许多控制器中使用此方法，可以将其添加到

$rootScope

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

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

<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>

ngClass允许条件。注意，他有单花括号（对象）而不是双花括号（表达式）真的吗？那么文档就错了。“表达式”链接指向我上面链接的页面。这是一个很好的观点，它是一个表达式，表达式只解析为true或false，因此没有流语句本身。谢谢，您的回答帮助我找到了问题和解决方案。

<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>

<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>