Question

我正在使用Angular构建网站，该网站显示文件夹图像中的图像。图像标题为 image1，image2等。该站点在视图中显示图像，一次显示一个图像。

页面首先显示第一张图像。要查看下一张图片，用户点击下一张。要查看上一张图片，用户点击上一页。要查看第一张图片，用户点击优先。

到目前为止，我只能让网站显示第一张图片，但我无法弄清楚如何获取下一张图片。

我的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"
    });
});

我需要在下一次和当前图像之前减去或加一时更改。 首先尝试：

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中得到了一条曲线。

我该怎么做？

请忘记到达最后一张图像或第一张图像时要做的整个算法。我会照顾好自己。在我的第一次尝试中假装我的逻辑是有道理的。

Answer 1

为什么要使用路由来完成这么简单的任务？请尝试以下方法：这是控制器：

 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：我发现为什么图像没有显示，我们没有给出整个路径（我忘记了/ images / part）。如果它没有改变img src中的路径部分，那应该解决它。我还将元素更改为按钮，以便ng-click轻松工作。 ng-click属性接受一个函数，该函数（例如x()）在$scope.x=function(){}范围内定义。祝你好运！

编辑3：固定功能和ng-src

如何根据变量更改ng视图

1 个答案: