javascript Angular ng-show,ng-hide,ng-if,ng-switch

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript Angular ng-show,ng-hide,ng-if,ng-switch相关的知识,希望对你有一定的参考价值。

// The expression that we pass doesn't have to be a boolean, could be anything that can be evaluated to a thruthy or a falsy expression in javascript.
// ng-show / ng-hide doesn't remove element from DOM, more similar to jquery show/hide
// ng-if removes the element from the DOM
// ng-switch is a powerful version of ng-if

// shows if movie.popular == true :
<p ng-show="movie.popular">This movie is popular!</p> 
//
// hides if movie.year < 2000
<p ng-hide="movie.year < '2000'">{{ movie.year }}</p>

<p ng-if="movie.popular">This movie is popular!</p>
<p ng-if="!movie.popular">This movie is not popular!</p>

<div ng-switch="movie.category">
  <p ng-switch-when="action">Action movie!</p>
  <p ng-switch-when="fantasy">Fantasy movie!</p>
  <p ng-switch-default>No category</p>
</div>

以上是关于javascript Angular ng-show,ng-hide,ng-if,ng-switch的主要内容,如果未能解决你的问题,请参考以下文章

如何为现有的 Javascript 库创建 Angular 库包装器?

从javascript 调用angular的函数

另一个 javascript 库上的 Angular 2 templateURL 功能

从 Angular 组件动态加载外部 javascript 文件

将外部css和javascript文件导入Angular 4

JavaScript---Angular 和JQuery