Modal and localStoage on mobile

ionic-v1
1

I have a problem with modal when opening it from a mobile … it shows the modal structure without the data from the local storage. N.B when opening it from PC browser it works perfectly …

app.js controller

// Open the modal
  $scope.showTask = function() {
  	$scope.taskModal.show();
  	var offerId= event.target.id;
	getOfferDetails(offerId);
  };

the function called before.

function getOfferDetails(offerId){
      var offers= JSON.parse(window.localStorage.getItem('offers'));
      var offer= offers[offerId];

      document.getElementById("headerBrandName").innerHTML=offer.brancheId.brandId.name;
      document.getElementById("offerBrandName").innerHTML=offer.brancheId.brandId.name;
      document.getElementById("brandLogo").src=offer.brancheId.brandId.logoLink;
      document.getElementById("offerBrandDescription").innerHTML=offer.brancheId.brandId.description;

      document.getElementById("offerImage").src=offer.pictureLink;
      document.getElementById("offerNoOfLikes").innerHTML=offer.noOfLikes;

      document.getElementById("offerDescription").innerHTML=offer.description;
 }

am i missing something?!
Thanks for your help …

2

Why are you using innerHTML? You could be using Angular expressions to give you 2 way data binding.

<p id="headerBrandName">{{offer.brancheId.brandId.name;}}</p>

You wouldn’t even need the id then

<p >{{offer.brancheId.brandId.name;}}</p>
1 Like
3

Oh! Thanks a lot @Calendee … um not familiar yet with Angular as um new in the web field … but it seems interesting…
I’m starting to check Angular tutorials now … but i have a question please.

if um going to bind it like that in the modal HTML :

<p id="headerBrandName">{{offer.brancheId.brandId.name;}}</p>

where should the offer attribute be identified? should it be in the controller?!

Many Thanks for your reply @Calendee :smile:

4

The “offer” is whatever you are getting from getOfferDetails in the controller.

Controller:

$scope.offer = getOfferDetails(offerId)

View:

<p>{{offer.brancheId.brandId.name}}</p>
<img ng-src="offer.logoLink"/>
<img ng-src="offer.pictureLink"/>
<p>{{offer.noOfLikes}}</p>
<p>{{offer.description}}</p>
1 Like
5

Yeah i got it =) Many thanks @Calendee for your help =)