2

次のコードは、7 つのサムネイルのリストを作成し、アクティブな画像にはクラス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-classandの式が機能しないのはなぜ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 に答える