Is it necessary for me to use NG-IF / NG-SWITCH or should I opt for NG-SHOW & NG-HIDE instead?

I'm facing a frustrating dilemma because I am unsure of the best approach to take in this scenario. Below is the basic setup:

I aim to display the current status of a movie, which will have different messages in the DOM based on its state. A movie can fall into one of three states. Note: All movies are stored in a JSON file and displayed on a single page.

  • State 1

    Movie released: true Movie in theaters: true

    User text: "In theaters now!"

  • State 2

    Movie release: true Movie in theaters: false

    User text: "Buy now!" (The buy link will be included in the movie object)

  • State 3

    Movie release: false Movie in theaters: false

    User text: SHOW RELEASE DATE HERE

Therefore, the possibilities are: 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"
},

Although the current setup successfully displays "In Theaters now!", the challenge lies in implementing additional conditions and adjusting vm.movieStatus accordingly. Despite trying various methods, I am unable to find a solution.

Your assistance would be greatly appreciated!

Answer №1

According to the guidelines, the ngIf directive has the ability to delete or regenerate a section of the DOM tree based on a specific {expression}. If the expression associated with ngIf results in a false value, then the element will be removed from the DOM. Conversely, if the expression is true, a duplicate of the element will be reinserted into the DOM.

It is important for you to determine whether you wish to retain the other state's elements in the DOM and just conceal them using CSS (as done by ngShow/ngHide), or completely eliminate the elements from the DOM (which is what ngIf accomplishes).

The expression utilized could look something like

ng-if="movie.released && movie.inTheaters"
or a similar format.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing Category Field Value in Mongoose One-to-Many Relationship

I am managing two collections: Category and Book Book: const mongoose = require('mongoose'); // eslint-disable-next-line camelcase const mongoose_delete = require('mongoose-delete'); const { Schem ...

How to Use RestKit on iOS to Retrieve a Specified Number of Elements Instead of the Entire

I am looking to implement an app similar to Twitter where objects are loaded in tens from the JSON data instead of loading all at once. Is there a way, using RestKit, for the "load more" button in UITableView to load the next ten objects if they exist in t ...

Maintain text while transitioning to another page

On my webpage (refer to image for details), users need to select options through a series of steps. The process involves clicking on a link in the top box, then entering a search term in the searchbox to display relevant links in div1. Clicking on a link ...

Filtering an object based on keys within an ng-repeat loop

I need help with displaying only the items listed in defaults and excluding the others. <ul ng-controller="Ctrl" class="dropdown-menu"> <li ng-repeat="(key, value) in Employee.KeyValue | filter:DefaultKeys(key) ">{{key}}</li> </ul ...

Chrome Extension with UMD Modules

The definition of the UMD module can be summarized as follows: (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports', ' ...

Merge two separate Vue applications into one cohesive application

I have developed two separate Vue apps independently from each other. User Interface Admin Interface Each app has its own routes, store, configs, etc. I came across this helpful comment here which discusses treating each app as a component within a mai ...

Discover the best approach for transforming a complicated JSON object/array into a map using inheritance coding techniques

Could someone help me with creating an array of objects (only 1 level) based on the following JSON structure? [ { 'family' : { 'name' : 'Doe', 'from' : 'Foo' }, ...

Designing an interactive 3D space using JavaScript

I'm currently developing an app that allows users to visualize different wallpapers in a 3D room setting. The concept involves placing the user inside a virtual space with four walls, where they can drag and look around, as well as change wallpapers v ...

Bug in ExtJS 4 causing the clickrepeater to be disabled when using the datepicker

I've developed a custom subclass of the DatePicker class. Within the update() method, I have implemented logic to disable the prevRepeater if the current month matches the month of the minDate property: me.prevRepeater.setDisabled(me.minDate &&am ...

What is the best way to transfer data from a component to a .ts file that contains an array?

I am currently developing a budgeting application and I have a component that is responsible for holding values that I want to pass to an array stored in a separate file. While I can retrieve data from the array, I am facing difficulty in figuring out how ...

Automatically adjust the top margin of the content section to accommodate a fixed header height

After extensive searching, I've come across various solutions but none of them seem to fit my needs. I am a beginner/amateur developer. The issue I am facing is with a fixed header that resizes when scrolling. I understand that by adding padding-top: ...

How can I use React.JS to scroll horizontally to a specific div id?

scrollCustom() { document.getElementById("myID").scrollIntoView({"block":"center"}) } My attempt at using scrollIntoView({"block":"center"}) was flawless in Chrome, but encountered problems in Internet Explorer! ...

Whoops! Unable to interpret properties from an undefined source while trying to retrieve 'get'

Every time I execute my program, I encounter the following error: Cannot read properties of undefined (reading 'get') TypeError: Cannot read properties of undefined (reading 'get') at Proxy.mounted (webpack-internal:///./node_module ...

There is an error in the TypeScript code where it is not possible to assign a string or

I'm struggling to resolve a typescript error. Upon checking the console log, I noticed that the regions returned by Set are an array of strings, which aligns perfectly with the region type in my state. Why isn't this setup working as expected? S ...

Display a notification for recurring users with the exception of first-time visitors

We have been working on updates for an older website and want to notify returning or repeat visitors of the changes. After making updates, some browsers continue to show a cached version of the site to returning visitors, causing them to see the site as b ...

Using Google Apps Script to upload a text file to Google Drive

It seems like uploading a file should be straightforward. However, I'm struggling with understanding blobs. function createFileUploader() { var app = UiApp.createApplication(); var panel = app.createVerticalPanel().setId('panel'); v ...

Vue 2 - Error: The function is not defined at HTMLInputElement.invoker (vue.esm.js?65d7:1810)TypeError: cloned[i].apply

I encountered the following error: Uncaught TypeError: cloned[i].apply is not a function at HTMLInputElement.invoker (vue.esm.js?65d7:1810) I have set up my project using vue-cli (simple webpack), and below is the code for my component: <template ...

Having trouble retrieving a value within the jQuery.ajax success function

I need to implement jQuery Validator in order to validate if a user's desired username is available during the sign-up process. The PHP script untaken.php is responsible for checking this, returning either ok if the username is free or taken if it is ...

Are the JQuery appended elements exceeding the width of the parent div?

I have an HTML div that is styled using the Bootstrap class span9. <div class="span9"> <div id = "selectedtags" class="well"> </div> <button class="btn" type="button" id="delegatecontent">Generate report</button&g ...

Problem with Azure Table JavaScript Solution

When attempting to utilize JavaScript to access Azure Storage Tables, I encountered an error that reads: "Error getting status from the table: TypeError: tableServiceClient.getTableClient is not a function." Despite finding multiple successful examples onl ...