변수에 따라보기를 변경하는 방법

저는 Angular를 사용하여 폴더의 이미지를 표시하고 있습니다. 이미지입니다. 이미지의 제목은 이며 이미지 1, 이미지 2 등입니다. 사이트는 한 번에 하나의 이미지로보기의 이미지를 표시합니다.변수에 따라보기를 변경하는 방법

페이지에 처음으로 첫 번째 이미지가 표시됩니다. 다음 이미지를 보려면 다음을 클릭하십시오. 이전 이미지를 보려면 이전을 클릭하십시오. 첫 번째 이미지를 보려면 을 먼저 클릭하십시오..

지금까지 사이트에 첫 번째 이미지 만 표시 할 수 있지만 다음 이미지를 가져 오는 방법을 알 수는 없습니다.

내 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"]);

내 스크립트로 myscripf라고는 :

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

나는 경우 다음 때 이전 현재 이미지 마이너스 또는 플러스 하나를 변경해야합니다. 첫 번째 시도 :

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

두 번째 시도 내부의 변수 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>

당신이 이미지 소스에 반영되는 변수 페이지를 변화하고있는 모든. 희망이 작품, 그리고 행운을 빌어 요.

편집 : 추가를 클릭 기능

편집 2 : 나는 이미지가 표시되지 않는 이유를 발견, 우리는 (나는/이미지/부분을 잊었) 전체 경로를주지 않았다. img src에서 경로 부분을 변경하지 않으면 수정해야합니다. ng-click이 쉽게 작동하도록 버튼을 사용하여 요소를 변경했습니다. ng-click 속성은 함수를 취하며 그 범위 (예 : x())는 $scope.x=function(){}으로 정의됩니다. 행운을 빕니다!

수정 3 : 고정 기능 및 ng-src

출처

2016-07-21 21:16:14

나는 새로운 각도로이 이미지를 변경하는 방법을 이해하지 못합니다. 다음을 클릭하면 어떻게됩니까? 다음 이미지는 어떻게 얻을 수 있습니까? – MJH

다음 기능을 보여 드리고 싶습니다. 논리는 중요하지 않습니다. 나는 총 초급 ~ _ ~'입니다. – MJH

'scope.page = 1'과''(실제로는 jpg로, 내 질문에는 html이 아닙니다.)하지만 작은 이미지는 로고가 누락되었습니다. 이미지가 표시되지 않습니다. 내 이미지가 차단되지 않습니다. – MJH

변수에 따라보기를 변경하는 방법

답변

관련 문제