Save the state of ng-src in Angualr.js

I am trying to make a saveable header image for an application in Angular.js, so far I have this code, also available as a Plunker here:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.bannerState = false;

  $scope.changeHeader = function () {
    $scope.bannerState = true;
  };

  $scope.currentImage = 0;

  $scope.nextButton = function () {
    if ($scope.bannerState) {
      $scope.currentImage++;
    }
    if ($scope.currentImage > ($scope.bannerImages.length - 1)) {
      $scope.currentImage = 0;
    }
  };

  $scope.previousButton = function () {
    if ($scope.bannerState) {
      $scope.currentImage--;
    }
    if ($scope.currentImage < 0) {
      $scope.currentImage = ($scope.bannerImages.length - 1);
    }
  };

  $scope.setHeader = function () {
    $scope.bannerState = false;
  };

  $scope.bannerImages = [
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme1.png"
    },
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme2.png"
    },
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme3.png"
    }
  ];
});

I have no idea how to store this in an object so that I can go away from the page and come back and it is there! Please help!

JP

Answers


HTML 5 local storage would be an option to store the state locally.

I modified your app.js file:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.bannerState = false;

  $scope.changeHeader = function () {
    $scope.bannerState = true;
  };

  $scope.currentImage = window.localStorage.getItem("bannerImage") | 0;

  $scope.nextButton = function () {
    if ($scope.bannerState) {
      $scope.currentImage++;
    }
    if ($scope.currentImage > ($scope.bannerImages.length - 1)) {
      $scope.currentImage = 0;
    }
  };

  $scope.previousButton = function () {
    if ($scope.bannerState) {
      $scope.currentImage--;
    }
    if ($scope.currentImage < 0) {
      $scope.currentImage = ($scope.bannerImages.length - 1);
    }
  };

  $scope.setHeader = function () {
    window.localStorage.setItem("bannerImage", $scope.currentImage);
    $scope.bannerState = false;
  };

  $scope.bannerImages = [
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme1.png"
    },
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme2.png"
    },
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme3.png"
    }
  ];
});

You can put it in $rootScope - so long as your page doesn't reset, you'll be good


Need Your Help

csv parsing, exploding avoiding “”

php csv explode

I have a csv file (really big) that I'm parsing with php.

ORACLE return from function without creating a new type

oracle function types oracle11g return

I'm wanting to create a function (oracle 11g) that will return multiple values but without having to creating a new TYPE. The end goal is much more complicated than the example I'm providing, but ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.