javascript - Slider in Angular.js -
what trying make slider following goal:
the pictures randomly pulled database , reload after interval without refreshing page.
so far slider.js looks this:
(function () { 'use strict'; var controllerid = 'sliderctrl'; angular.module('app').controller(controllerid, ['$scope', 'common', 'config','datacontext','$interval', sliderctrl]); function sliderctrl($scope, common, config, datacontext,$interval) { var getlogfn = common.logger.getlogfn; var log = getlogfn(controllerid); var logerror = getlogfn(controllerid, 'error'); var logsuccess = getlogfn(controllerid, 'success'); var numberofdeals = 1; var vm = this; vm.myinterval = 3000; vm.slides = []; vm.addslide = addslide; vm.imagespinneroptions = { radius: 10, lines: 5, length: 0, width: 8, speed: 1.7, corners: 1.0, trail: 100, color: 'black' }; vm.companyname = config.companysettings.companyname; vm.isimagebusy = new array(numberofdeals); vm.toggleimagespinner = toggleimagespinner; activate(); function activate() { resetimagespinners(); var promises = [getcardeals()]; common.activatecontroller(promises, controllerid) .then(function() { $.each(vm.randomcars, function(index, value) { vm.addslide(value); }); log('activated home view'); window.prerenderready = true; }); } function resetimagespinners() { (var = 0; < numberofdeals; i++) { toggleimagespinner(true, i); } } function toggleimagespinner(on, index) { vm.isimagebusy[index] = on; } function addslide(car) { if (vm.slides.length < numberofdeals) { vm.slides.push({ image: '{servicename}/image?cid={companyid}&sid={stockid}&no=0'. format({ servicename: config.remoteservicename, companyid: car.companyid, stockid: car.stockid }), text: '{make} {model} ({year})'. format({ make: car.make, model: car.variant, year: car.year }), price: (car.sellingprice || ''), carid: car.stockid, companyid: car.companyid, make: car.make, description: car.description, }); } }; function getcardeals() { return datacontext.deal.getall().then(function (data) { return vm.randomcars = data; }); } } })();
and slider.html:
<div data-ng-controller="sliderctrl vm"> <style> .slider { margin-top: 1em; } .slider-box img { width: 100%; } .slider-box { width: 960px; margin: 0 auto; heigth:304px; } </style> <div class="slider-box" data-ng-repeat="slide in vm.slides"> <a data-ng-href="/vehicles/details/{{slide.companyid}}/{{slide.carid}}"> <img data-ng-src="{{slide.image}}" data-imageonload="{{$index}}"> </a> </div> </div>
it makes 1 car picture if want see 1 have reload page.
Comments
Post a Comment