我正在使用 Angular 构建一个网站，该网站显示文件夹 images 中的图像。这些图像的标题为 image1、image2 等。该站点在 View 中显示图像，一次一张图像。
页面首先显示第一张图片。要查看下一张图片，用户单击下一步。要查看上一张图片，用户点击上一张。要查看第一张图片，用户点击第一张。
到目前为止，我只能让网站显示第一张图片，但我不知道如何获取下一张图片。
My 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>
我的部分 View 名为 myView:
<div>
<img src="../images/image1.jpg" />
</div>
我的 Controller ，叫做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"
});
});
我需要更改当前图像减一或加一的下一个时间和上一个时间。 第一次尝试:
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 中仍然看到波浪线。
我该怎么做？
请忘记到达最后一张图像或第一张图像时要做什么的整个算法。我会自己处理的。假装我的逻辑在我第一次尝试时是有道理的。
最佳答案
为什么要为这么简单的任务使用路由？尝试以下操作: 这是 Controller :
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>
您所做的只是更改反射(reflect)在图像源中的可变页面。希望这能奏效，祝你好运。
编辑:添加点击功能
编辑 2:我发现为什么图像没有显示，我们没有给出整个路径(我忘记了/images/部分)。如果它不更改 img src 中的路径部分，那应该可以解决它。我还将您的 a 元素更改为按钮，以便 ng-click 轻松工作。 ng-click 属性接受一个函数，该函数(例如 x())在范围内定义为 $scope.x=function(){ }。祝你好运!
编辑 3:固定功能和 ng-src
关于javascript - 如何根据变量更改 ng-view，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38513302/