AngularJS ng-show ng-hide not working with interpolation

Question

I am trying to show   hide some HTML using the ng-show and ng-hide functions provided by AngularJS   According to the documentation  the respective usage for these functions are as follows      ngHide      expression  - If the expression truthy then the element is shown or hidden respectively    ngShow      expression  - If the expression is truthy then the element is shown or hidden respectively    This works for the following usecase    lt p ng-hide  true  gt I m hidden lt  p gt   lt p ng-show  true  gt I m shown lt  p gt    However  should we use a parameter from an object as the expression then the ng-hide and ng-show are given the correct true false value but the values are not treated as a boolean so always return false   Source   lt p ng-hide    foo bar    gt I could be shown  or I could be hidden lt  p gt   lt p ng-show    foo bar    gt I could be shown  or I could be hidden lt  p gt    Result   lt p ng-hide  true  gt I should be hidden but I m actually shown lt  p gt   lt p ng-show  true  gt I should be shown but I m actually hidden lt  p gt    This is either a bug or I am not doing this correctly   I cannot find any relative information on referencing object parameters as expressions so I was hoping anyone with a better understanding of AngularJS might be able to help me out

User · Answer

You can t use      when using angular directives for binding with ng-model but for binding non-angular attributes you would have to use         Eg    ng-show  my-model  title      my-model

User · Answer

The foo bar reference should not contain the braces    lt p ng-hide  foo bar  gt I could be shown  or I could be hidden lt  p gt   lt p ng-show  foo bar  gt I could be shown  or I could be hidden lt  p gt    Angular expressions need to be within the curly-brace bindings  where as Angular directives do not   See also Understanding Angular Templates

User · Answer

If you want to show hide an element based on the status of one   expression   you can use ng-switch    lt p ng-switch  foo bar  gt I could be shown  or I could be hidden lt  p gt    The paragraph will be displayed when foo bar is true  hidden when false

User · Answer

remove      braces around foo bar because angular expressions cannot be used in angular directives   For More  https   docs angularjs org api ng directive ngShow  example     lt body ng-app  changeExample  gt       lt div ng-controller  ExampleController  gt       lt p ng-show  foo bar  gt I could be shown  or I could be hidden lt  p gt       lt p ng-hide  foo bar  gt I could be shown  or I could be hidden lt  p gt       lt  div gt       lt  body gt    lt script gt       angular module  changeExample                controller  ExampleController      scope   function  scope               scope foo                 scope foo bar   true                lt  script gt

User · Answer

Since ng-show is an angular attribute i think  we don t need to put the evaluation flower brackets           For attributes like class we need to encapsulate the variables with evaluation flower brackets

User · Answer

Try wrapping expression with      scope  apply function         scope foo bar true

User · Answer

lt script src  http   code angularjs org 1 2 0-rc 2 angular js  gt  lt  script gt   lt script type  text javascript  gt      function controller  scope             scope data                 show  true              hide  false                   lt  script gt    lt div ng-controller  controller  gt       lt div ng-show  data show  gt  If true the show otherwise hide   lt  div gt       lt div ng-hide    data hide   gt  If true the show otherwise hide  lt  div gt   lt  div gt

[angularjs] AngularJS: ng-show / ng-hide not working with `{{ }}` interpolation

Examples related to angularjs

Examples related to ng-show

Examples related to ng-hide