javascript - 我需要在 NG-SHOW 和 NG-HIDE 上使用 NGIF/NGSWITCH 吗？

Question

我对此感到很沮丧，因为我不知道应该使用哪种方法，下面是基本设置。

我想显示电影的当前状态，基于电影的状态我想在 DOM 中有不同的消息，电影可以有 3 种不同的状态。 注意:电影存储在一个JSON文件中，并全部显示在1页上。

• 状态 1。

  电影发行:真实 影院上映:真实

  用户文本:“现在正在上映!”

• 状态 2。

  电影发行:真实 影院上映的电影:假

  用户文本:“立即购买!” (购买链接将包含在电影中 对象)

• 状态 3。

  电影发行:假 影院上映的电影:假

  用户文本:在此处显示发布日期

所以它是:真，真||真，假 ||假的假的。

HTML 代码。

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

JavaScript 代码

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

JSON 对象

{
    "_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"
},

这工作正常并显示“现在在影院!”，现在唯一的问题是我需要使用更多条件并根据它们更改 vm.movi​​eStatus。 我尝试过很多不同的事情，但我似乎无法解决。

非常感谢您的帮助!

Answer 1

根据文档，ngIf 指令根据 {expression} 删除或重新创建 DOM 树的一部分。如果分配给 ngIf 的表达式的计算结果为假值，则该元素将从 DOM 中删除，否则，该元素的克隆将重新插入到 DOM 中。

您需要决定是否要将其他状态的元素保留在 DOM 中并仅隐藏它们(使用 CSS，这就是 ngShow/ngHide 所做的)或完全从 DOM 中删除元素(这就是 ngIf 会做)。

您使用的表达式类似于 ng-if="movie.released && movie.inTheaters" 或类似的。