我需要NG-IF/NG-SWITCH还是NG-SHOW&NG-HIDE

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

本文关键字：NG-SHOW amp NG-HIDE 还是 NG-SWITCH NG-IF      更新时间：2023-09-26

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

我想显示一部电影的当前状态，根据电影的状态，我想在DOM中有不同的消息，一部电影可以有3种不同的状态。注意：电影存储在一个JSON文件中，并且都显示在一个页面上

  • 状态1。

    电影发布：真影院电影：true

    用户文本："现在在影院！"

  • 状态2.

    电影发行：true影院电影：错误

    用户文本："立即购买！"（购买链接将包含在电影中对象）

  • 状态3。

    电影发布：false影院电影：错误

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

所以它是：真，真，假。

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.movieStatus。我试过做很多不同的事情，但似乎都做不出来。

非常感谢您的帮助！

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

您需要决定是将其他状态的元素保留在DOM中并隐藏它们（使用CSS，这就是ngShow/ngHide所做的），还是从DOM中完全删除这些元素（这就是ngIf所做的事情）。

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

相关文章：