solution • AngularJS’s «ng» tips & tricks - martindubenet/wed-dev-design GitHub Wiki

ng Conditional statements

angular.module sources

Partial JavaScript code reference for all following examples.

binding: { displayPageTitle: '@' }

IF/ELSE for CSS class

Short and clean for simple conditions based on a boolean (true VS false) question.

Code examples for the parent HTML view:

<article displayed-as-row="true">

Using "true" is subjective. It could be anything within those double-quotes, as long as there is something. Empty double-quotes "" = false

Code example for within the child controler:

Manage CSS class with ternary operator

<h1 class="heading" ng-class="{'page-title not-page-title': $ctrl.displayPageTitle}>...</h1>

  • If parameter is defined, css = h1.heading.page-title.
  • If parameter NOT defined, css = h1.heading.not-page-title.

Displaying HTML container only IF true

<section class="header" ng-if="$ctrl.displayPageTitle !== undefined"> <h1>...</h1> </section>

Using either ng-if or ng-show in the DOM will manage the visibility of the HTML block that it is applied on.

What is ng-binding class?

This binding class gets printed in the DOM simply to indicate that Angular generated some binding in there. This class is NOT to be used for CSS styling.

⚠️ **GitHub.com Fallback** ⚠️