inline conditionals in angular js

Question

I was wondering if there is a way in angular to conditionally display content other than using ng-show etc  For example in backbone js I could do something with inline content in a template like    lt   if  myVar      two       gt  show this lt       gt    but in angular  I seem to be limited to showing and hiding things wrapped in html tags   lt p ng-hide  true  gt I m hidden lt  p gt   lt p ng-show  true  gt I m shown lt  p gt    What is the recommended way in angular to conditionally show and hide inline content in angular just using      rather than wrapping the content in html tags

User · Answer

Angular 1 1 5 added support for ternary operators     myVar      two     it s true     it s false

User · Answer

Angular UI library has built-in directive ui-if for condition in template Views upto angular ui 1 1 4  Example   Support in  Angular UI upto ui 1 1 4   lt div ui-if  array length gt 0  gt  lt  div gt    ng-if available in all the angular version after 1 1 4   lt div ng-if  array length gt 0  gt  lt  div gt    if you have any data in array variable then only the div will appear

User · Answer

Works even in exotic Situations    lt br ng-show  myCondition    true    gt

User · Answer

For checking a variable content and have a default text  you can use    lt span gt   myVar     Text    lt  span gt

User · Answer

So with Angular 1 5 1    had existing app dependency on some other MEAN stack dependencies is why I m not currently using 1 6 4     This works for me like the OP saying   myVar      two     it s true     it s false        vm StateName      AA     ALL    vm StateName

User · Answer

I am using the following to conditionally set the class attr when ng-class can t be used  for example when styling SVG    ng-attr-class    someBoolean  amp  amp   class-when-true      class-when-false        The same approach should work for other attribute types    I think you need to be on latest unstable Angular to use ng-attr-  I m currently on 1 1 4   I have published an article on working with AngularJS SVG that talks about this and related issues  http   www codeproject com Articles 709340 Implementing-a-Flowchart-with-SVG-and-AngularJS

User · Answer

if you want to display  None  when value is  0   you can use as    lt span gt      scope amount      0      scope amount    None      lt  span gt    or true false in angular js   lt span gt      scope amount      0      False     True      lt  span gt

User · Answer

If I understood you well I think you have two ways of doing it   First you could try ngSwitch and the second possible way would be creating you own filter  Probably ngSwitch is the right aproach but if you want to hide or show inline content just using      filter is the way to go   Here is a fiddle with a simple filter as an example    lt div ng-app  exapleOfFilter  gt     lt div ng-controller  Ctrl  gt       lt input ng-model  greeting  type  greeting  gt         lt br gt  lt br gt         lt h1 gt   greeting isHello   lt  h1 gt     lt  div gt   lt  div gt   angular module  exapleOfFilter          filter  isHello   function         return function input             conditional you want to apply       if  input      hello             return input                return                  function Ctrl  scope       scope greeting    hello

User · Answer

Thousands of ways to skin this cat  I realize you re asking about between      speifically  but for others that come here  I think it s worth showing some of the other options   function on your  scope  IMO  this is your best bet in most scenarios      app controller  MyCtrl   function  scope           scope foo   1          scope showSomething   function input               return input    1    Foo     Bar                      lt span gt   showSomething foo    lt  span gt      ng-show and ng-hide of course     lt span ng-show  foo    1  gt Foo lt  span gt  lt span ng-hide  foo    1  gt Bar lt  span gt      ngSwitch    lt div ng-switch on  foo  gt      lt span ng-switch-when  1  gt Foo lt  span gt      lt span ng-switch-when  2  gt Bar lt  span gt      lt span ng-switch-default gt What  lt  span gt    lt  div gt      A custom filter as Bertrand suggested   this is your best choice if you have to do the same thing over and over   app filter  myFilter   function        return function input         return input    1    Foo     Bar             foo   myFilter       Or A custom directive   app directive  myDirective   function        return        restrict   E        replace  true       link  function scope  elem  attrs           scope  watch attrs value  function v              elem text v    1    Foo    Bar                                   lt my-directive value  foo  gt  lt  my-directive gt    Personally  in most cases I d go with a function on my scope  it keeps the markup pretty clean  and it s quick and easy to implement  Unless  that is  you re going to be doing the same exact thing over and over again  in which case I d go with Bertrand s suggestion and create a filter or possibly a directive  depending on the circumstances   As always  the most important thing is that your solution is easy to maintain  and is hopefully testable  And that is going to depend completely on your specific situation

User · Answer

EDIT  2Toad s answer below is what you re looking for  Upvote that thing If you re using Angular  lt   1 1 4 then this answer will do  One more answer for this  I m posting a separate answer  because it s more of an  quot exact quot  attempt at a solution than a list of possible solutions  Here s a filter that will do an  quot immediate if quot   aka iif   app filter  iif   function         return function input  trueValue  falseValue            return input   trueValue   falseValue             and can be used like this    foo     quot bar quot    iif    quot it s true quot     quot no  it s not quot

User · Answer

I ll throw mine in the mix   https   gist github com btm1 6802312  this evaluates the if statement once and adds no watch listener BUT you can add an additional attribute to the element that has the set-if called wait-for  somedata prop  and it will wait for that data or property to be set before evaluating the if statement once  that additional attribute can be very handy if you re waiting for data from an XHR request   angular module  setIf      directive  setIf  function          return         transclude   element         priority  1000        terminal  true        restrict   A         compile  function  element  attr  linker            return function  scope  iterStartElement  attr              if attr waitFor                var wait   scope  watch attr waitFor function nv ov                 if nv                    build                    wait                                                else               build                           function build                 iterStartElement 0  doNotMove   true              var expression   attr setIf              var value   scope  eval expression               if  value                  linker scope  function  clone                    iterStartElement after clone                   clone removeAttr  set-if                    clone removeAttr  wait-for

[angularjs] inline conditionals in angular.js

Examples related to angularjs

Examples related to if-statement

Examples related to ternary-operator