CODEWITHSUNDEEP
javascriptangularjsjson
Thomas Geelens
Thomas Geelens

Reputation: 31

Do I need NG-IF / NG-SWITCH or NG-SHOW & NG-HIDE?

I'm experiencing a lot of frustration with this one because I just don't know which method I should use, below is the basic setup.

I want to show the current state of a movie, based on the states of the movie I want to have different message in the DOM, a movie can have 3 different states. Note: The movies are stored in a JSON file and are all displayed on 1 page.

So it's: true,true || true,false || false false.

HTML CODE.

   <div class="ui blue ribbon label" ng-if="vm.getRelease(movie)">
   <i class="film icon"></i> {{vm.movieStatus}}
  </div>

JavaScript Code

        function getRelease(movie){
        if(movie.released && movie.inTheaters){
            vm.movieStatus = "In Theaters now!";
            return true
        } else {
            return 
        }
    }

JSON OBJECT

{
    "_id": 1,
    "name": "Captain America: Civil War",
    "yay": 500365,
    "nay": 14357,
    "releaseYear": 2016,
    "releaseDate": "27-4-2016",
    "inTheaters": true,
    "released": true,
    "buyNow": "",
    "imdbUrl": "http://www.imdb.com/title/tt3498820/",
    "image_url": "http://cityplusme.com/images/CaptainAmericaCivilWar.jpg",
    "description": "Political interference in the Avengers' activities causes a rift between former allies Captain America and Iron Man.",
    "trailer": "https://www.youtube.com/watch?v=dKrVegVI0Us"
},

This works fine and shows "In Theaters now!", the only problem is now that I need use more conditions and change the vm.movieStatus based on them. I've tried to work with a lot of different things but I can't seem to work it out.

Help is very much appreciated!

Upvotes: 1

Views: 499

Answers (1)

Venkat
Venkat

Reputation: 1145

As per the documentation, ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise, a clone of the element is reinserted into the DOM.

You need to decide whether you want to keep the other state's elements in the DOM and just hide them(using CSS, which is what ngShow/ngHide does) or remove the elements from the DOM altogether (which is what ngIf would do).

The expression you use will be like ng-if="movie.released && movie.inTheaters" or similar.

Upvotes: 2

Related Questions