変数に応じてng-viewを変更する方法

私は、Angularを使用して、フォルダの画像の画像を表示するサイトを構築しています。画像は、image1、image2などというタイトルです。サイトは、一度に1つの画像をビュー内に表示します。変数に応じてng-viewを変更する方法

ページに最初に最初の画像が表示されます。次の画像を表示するには、の次のをクリックします。前の画像を表示するには、の前にをクリックします。最初の画像を表示するには、の最初のをクリックします。

これまでのところ、私はサイトに最初の画像を表示させることしかできませんが、次の画像を取得する方法はわかりません。

マイIndex.htmlと（メインページ）：

<script src="../Scripts/angular.min.js"></script> 
    <script src="../Scripts/angular-route.js"></script> 
    <script src="../modules/myModule.js"></script> 
    <script src="../Controllers/myController.js"></script> 
    <script src="../Scripts/MyScript.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <ul> 
     <li><a href="#next">Next</a></li> 
     <li><a href="#first">First</a></li> 
     <li><a href="#previous">Previous</a></li> 
    </ul> 
    <div id="images" class="ng-view"> 
    </div> 
</body> 
</html>

私の部分図と呼ばれるMYVIEW：

<div> 
    <img src="../images/image1.jpg" /> 
</div>

私のコントローラと呼ばれるmyController：

app.controller("myCtrl", function ($scope) { 

});

MyModuleという呼ば

マイ・モジュール、：

var app = angular.module("myApp", ["ngRoute"]);

私のスクリプトは、にMyScriptと呼ばれる：

app.config(function ($routeProvider) { 
    $routeProvider 
    .when("/", { 
     templateUrl: "image1.html" 
    }) 
    .when("/next", { 
     templateUrl: "image1.html" 
    }) 
    .when("/first", { 
     templateUrl: "image1.html" 
    }) 
    .when("/previous", { 
     templateUrl: "image1.html" 
    }); 
});

私がするとき、次のとき、以前の現在の画像のマイナスまたはプラス1に変更する必要があります。 最初の試み：

var page = 0; 

app.config(function ($routeProvider) { 
    $routeProvider 
    .when("/", { 
     templateUrl: "image1.html" 
    }) 
    .when("/next", { 
     page++; 
     templateUrl: "image" + page + ".html"    
    }) 
    .when("/first", { 
     templateUrl: "image1.html" 
    }) 
    .when("/previous", { 
     page--; 
     templateUrl: "image" + page + ".html" 
    });

だがapp.configを

2回目の試行内の変数pageの下に波線赤いエラー行を得た： myControllerに変数を置きます。

app.controller("myCtrl", function ($scope) { 
    $scope.page = 0; 
});

しかし、私はまだapp.configで不思議な行を得ました。

どうすればいいですか？

最後の画像または最初の画像に到着するときの処理のアルゴリズム全体を忘れてください。私はそれを世話します。私の最初の試みの論理が理にかなっているようなふりをする。

出典

2016-07-21 MJH

なぜこのような単純なタスクにルーティングを使用しますか？次のことを試してみてください。ここではコントローラーです：

app.controller("myCtrl", function($scope) { 
    $scope.page = 1; 
    $scope.last = 9999; 
    $scope.next = function() { 
    if (last < $scope.page) { 
     $scope.page= $scope.page + 1; 
    } else { 
     $scope.page = 1; 
    } 
    }; 
    $scope.first = function() { 
    $scope.page = 1; 
    }; 
    $scope.prev = function() { 
    $scope.page =$scope.page - 1; 
    }; 
});

そして、あなたのHTML：

<script src="../Scripts/angular.min.js"></script> 
    <script src="../Scripts/angular-route.js"></script> 
    <script src="../modules/myModule.js"></script> 
    <script src="../Controllers/myController.js"></script> 
    <script src="../Scripts/MyScript.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <ul> 
     <li><button ng-click="next()">Next</button></li> 
     <li><button ng-click="first()">First</button></li> 
     <li><button ng-click="prev()">Previous</button>/li> 
    </ul> 
    <img ng-src="'/images/image{{page}}.jpg'"></img> //Thank You MJH 
</body> 
</html>

あなたがやっているすべては、映像ソースに反映されている変数のページを変更することです。これがうまくいき、幸運を祈っています。

EDIT：追加されましクリック機能

EDIT 2：私は、画像が表示されない理由、私たちは（私は/画像/部分を忘れてしまった）パス全体を与えませんでした。 img srcのパス部分が変更されなければ、修正する必要があります。私はまた、ng-clickが簡単に動作するように、要素をボタンに変更しました。 ng-click属性は関数を取ります。その関数（x()など）は、$scope.x=function(){}のスコープで定義します。がんばろう！

EDIT 3：固定機能とNG-SRC私は、画像を変更するには、この使用方法を理解していない角度に新たなんだ

出典

2016-07-21 21:16:14

。 [次へ]をクリックすると、どうなりますか？どうすれば次の画像を手に入れることができますか？ – MJH

次の機能を紹介したいと思います。論理は関係ありません。私は初心者です〜_〜 '。 – MJH

私は 'scope.page = 1'と' 'を試しました（私の質問のように実際はjpgで、htmlではありません）。画像が表示されません。私の画像はブロックされていません。 – MJH

変数に応じてng-viewを変更する方法

答えて

関連する問題