如何根据变量更改ng视图

I'm building a site using Angular, that displays images from a folder images. The images are titled image1, image2, etc.. The site displays the images in a view, one image at a time.

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

The page displays the first image at first. To see the next image, the user clicks next. To see the previous image the user clicks Previous. To see the first image, the user clicks First.

该页面首先显示第一个图像。要查看下一张图片,用户点击下一步。要查看上一个图像,用户单击“上一个”。要查看第一个图像,用户单击“第一个”。

So far the I can only make the site display the first image, but I can't figure out how to get the next images.

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

My Index.html(the main page):

我的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>

My partial view called myView:

我的部分视图称为myView:

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

My Controller, called myController:

我的控制器,名为myController:

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

});

My Module, called myModule:

我的模块,名为myModule:

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

My script, called myScript:

我的脚本名为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"
    });
});

I need to change when next and when previous to the current image minus or plus one. first try:

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

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

but got a squiggly red error line under the variable page inside app.config

但在app.config中的变量页面下有一条波浪形的红色错误行

Second try: putting a variable in myController;

第二次尝试:在myController中放置一个变量;

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

but I still got the squiggly line in app.config.

但我仍然在app.config中得到了波浪线。

How can I do this?

我怎样才能做到这一点?

Please forget the entire algorithm of what to do when arriving at the last image or the first image. I'll take care of that myself. Pretend like my logic in my first try makes sense.

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

1 个解决方案

#1

Why use routing for such a simple task? Try the following: Here is the 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;
  };
});

And your HTML:

你的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>

All you are doing is changing a variable page which is reflected in the image source. Hope this works, and good luck.

您所做的只是更改一个反映在图像源中的变量页面。希望这有效,祝你好运。

EDIT: Added Click Functions

编辑:添加了点击功能

EDIT 2: I found why the image doesn't show, we didn't give the entire path (I forgot the /images/ part). That should fix it, if it doesn't change the path part in the img src. I also changed your a elements to buttons, for ng-click to work easily. The ng-click attribute takes a function, that function (for example x()) be defined in the scope with $scope.x=function(){}. Good Luck!

编辑2:我发现为什么图像没有显示,我们没有给出整个路径(我忘了/ images / part)。如果它不改变img src中的路径部分,那应该修复它。我还将元素更改为按钮,以便ng-click轻松工作。 ng-click属性接受一个函数,该函数(例如x())在$ scope.x = function(){}的范围内定义。祝好运!

EDIT 3: Fixed Function and ng-src

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

#1