i'm building site using angular, displays images folder images. images titled image1, image2, etc.. site displays images in view, 1 image @ time.
the page displays first image @ first. see next image, user clicks next. see previous image user clicks previous. see first image, user clicks first.
so far can make site display first image, can't figure out how next images.
my index.html(the main page):
<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:
<div> <img src="../images/image1.jpg" /> </div> my controller, called mycontroller:
app.controller("myctrl", function ($scope) { }); my module, called mymodule:
var app = angular.module("myapp", ["ngroute"]); my script, called 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 change when next , when previous 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 squiggly red error line under variable page inside app.config
second try: putting variable in mycontroller;
app.controller("myctrl", function ($scope) { $scope.page = 0; }); but still got squiggly line in app.config.
how can this?
please forget entire algorithm of when arriving @ last image or first image. i'll take care of myself. pretend logic in first try makes sense.
why use routing such simple task? try following: here 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 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 mjh </body> </html> all doing changing variable page reflected in image source. hope works, , luck.
edit: added click functions
edit 2: found why image doesn't show, didn't give entire path (i forgot /images/ part). should fix it, if doesn't change path part in img src. changed elements buttons, ng-click work easily. ng-click attribute takes function, function (for example x()) defined in scope $scope.x=function(){}. luck!
edit 3: fixed function , ng-src
Comments
Post a Comment