Is possible change ID on ion-content?


#1

Hello guys, I have a problem in manipulate a ID tag on ion-content because I need that dynamic:

My view

<ion-content id="exterminador"> This works fine for me

My CSS
.scroll-content#exterminador{
background: url(http://xxxxx.com.br/contagemapp/img/exterminadorbg.jpg);
}

.list, .item {
background: transparent;
}

Is that possible to change the ID tag to get my background-image Variable according with my id parameter?

<ion-content id="{{item.image}}"> And I need something like this, this not work!!!

Thanks in advance!!!


#2

This isn’t an ionic question (it’s an angular one), but try: ng-attr-id instead of id.


#3

Thanks and sorry darshanp my mistake, but still not working!

I did this... <ion-content ng-attr-id="{{item.image}}">

#4

You can use ng-style to dynamically change the background image, like this:

<ion-content ng-style="{'background-image':'url(' + item.image + ')'}">

See this codepen for an example of the background image changing for each view: http://codepen.io/brandyshea/pen/MwGVbj?editors=101

This way you don’t have to define all of the selectors in CSS.

To answer the original question, the code you pasted should be working. I created a codepen using ng-attr-id: http://codepen.io/brandyshea/pen/xGjWdY


#5

Thank you so much brandyshea, I’m trying to figure that out here because I’m totaly newbie and on my code I’m already passing a field ID to the detail view,

<div class="col col-50">
    <a ng-href="#/app/cinemas/{{item.aId}}"> 
        <img style="width:70%;" src="http://joaopaulodias.com.br/contagemapp/img/img_{{item.imagem}}.jpg"><br />
        <img style="width:15%;" src="http://joaopaulodias.com.br/contagemapp/img/{{item.idioma}}.png">
    </a>
</div>

so I don’t understand why ion-content do not accept my parameter.

<ion-content ng-style="{'background-image':'url(' + item.image + ')'}">
    <ion-item  class="item-text-wrap" ng-repeat="item in cinemas | filter: {aId: wichfilm}" >
         <!--<span><img style="width:100%;" src="http://joaopaulodias.com.br/contagemapp/img/img_{{item.imagem}}_big.jpg" alt="Photo">    
        </span>-->
    <div class="list" >
        <div class="item item-divider">{{item.nome}} <b>{{item.idioma}}</b>
        </div>
    </div>

#6

It’s really hard to help without seeing your app structure and the controller code. Looking at what you pasted though you are referencing item.image on the ion-content but it isn’t defined, unless you have item defined in the controller.

Any way you could make a codepen to show me how you are passing the data?


#7

Sure, I’m don’t work with codepen, but I’ve pasted codes there…

This is the page that sends the information about the movie… http://codepen.io/escmaster/pen/GJdxBV

And this one is a detail page that receive the aId from the master page and I want to set a background everytime that changes the aId on URL… http://codepen.io/escmaster/pen/GJdxwK

I think the problem is before ng-repeat, because I can’t get any data before, but inside the ng-repeat I can get fine.

I hope you understand… Thank you so much for your help!!!

This is the master page that send the aId to details page…

This is how looks like…

And This is what I want…


#8

So, those two CodePens are a bit of a mess, so not sure how much help I can be here.

This is a classic case of Master Detail pattern though, and I suggest reading my article on this pattern in Ionic:

What you seem to be missing, unless I just didn’t see it, is defining the $scope variable item in your details view. the “item” variable only exists on your master view inside of your ng-repeat.

To use “item” in your details view, you need to define it. It looks like you may be grabbing the id, which is a good first step, but you’ll need to actually do something with that id in your controller. For example: (NOT WORKING CODE)

var cinemasRef = new Firebase('https://contagem.firebaseio.com/cinemas/'+$state.params.aId);
$scope.item= $firebaseObject(cinemasRef);

Basically, when you get to your details controller, you need to grab the id from the state params and then do a call to Firebase for that item, and save the returned object to the $scope.item variable.


#9

Thanks Mr. Andrew, I’ll read and try here


#10

Hello again Mr. Andrew and Mrs Brandy, I`ve created a Plunk for this issue and I think is more organized and more easy to understand what I need, if you could take a minute to look it up I’ll appreciate… http://plnkr.co/edit/Z3lU8EDWpB3B5rdywDm6


#11

Hey, so it is really helpful if the code example provided is working and has proper indentation. I modified your plunker to include the proper scripts, modules and references to the templates in order to get the plunker to work. After doing this I changed your factory to have two functions: one to get all of the cinemas and one to get a cinema by the aId value in your object:

.factory('Cinemas', ['$firebaseArray', function($firebaseArray){
  var cinemasRef = new Firebase('https://contagem.firebaseio.com/cinemas');
  var cinemas = $firebaseArray(cinemasRef);
  
  return {
    all: function () {
      return cinemas;
    },
    get: function (aId) {
      for (var i = 0; i < cinemas.length; i++) {
        console.log(cinemas[i]);
          if (cinemas[i].aId === aId) {
              return cinemas[i];
          }
      }
      return null;
    }
  }
}])

Then, using the master detail pattern that Andrew mentioned, I am passing the id from one state to another via $stateParams and adding it to the resolve function of the state:

.state('app.cinemas', {
    url: "/cinemas",
    views: {
      'menuContent': {
        templateUrl: "cinemas.html",
        controller: 'CinemasController'
  
      }
    },
    resolve:  {
        allCinemas: function (Cinemas) {
        return Cinemas.all();
      }
    }
  })
  .state('app.cinemasdetalhe', {
    url: "/cinemas/:aId",
    views: {
      'menuContent': {
        templateUrl: "detailPage.html",
        controller: 'DetailsController'
      }
    },
    resolve: {
     cinema: function($stateParams, Cinemas) {
        return Cinemas.get($stateParams.aId);
     }
    }
  });

I separated the states to their own controllers and then get the data from the resolve in them:

.controller('CinemasController', function($scope, $state, allCinemas) {
  $scope.cinemas = allCinemas;
})

.controller('DetailsController', function($scope, $state, $stateParams, cinema) {
  $scope.item = cinema;
})

Notice I am assigning cinema to item because that is what you are using in the details page. Then, I am able to reference that item (without looping through all of them) on the details page.

Here is the updated Plunker: http://plnkr.co/edit/W4XIzE6FIheN0Kd7uyDH?p=preview


#12

Hi Mrs Brandy, I have no words to say to you… Thank you sooo muchhh, and sorry to give you to much work with my problem… God bless you always!!! If you need something and I can help (I doubt about that but…) I’m here ok!!!


#13

It wasn’t too much work! I was just giving some advice on how to get the most help from people. You’re more likely to get assistance on here if you provide working examples for people to mess with. :slight_smile: Thank you!


#14

Sorry for delay, the fuso not helps… You´re very kind… I understand what you saying, the problem is this is the very first time that I use this tools like codepen and plunker, I’ll make this thing happen when I need assistance again and I’ll study you code a lot, thank you again for your words and your help!


#15

Hey, its nice! :stuck_out_tongue_winking_eye:
But i think there are some mistakes…
The variables “allCinemas” and “cinema” can’t be called on the controllers, it doesn’t work for me.
But, thanks for the example!