Menu
First of all, the two directives can trip over each other( see this JSFiddle, as provided by Joel Skrepnek), and is generally just bad design. You can use a function, another field or just some more inline-logic.
ng-if can only render data whenever the condition is true. It doesn't have any rendered data until the condition is true. ng-show can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives.
The difference is that ng-if removes elements from the DOM. If there are large parts of the code that will not be shown, then ng-if is the way to go. ng-show will only hide the elements but will keep all the handlers.
The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements.
Use a controller method if you need to run arbitrary JavaScript code, or you could define a filter that returned true or false.
I just tested (should have done that first), and something like ng-show="!a && b" worked as expected.
ng-show / ng-hide accepts only boolean values.
For complex expressions it is good to use controller and scope to avoid complications.
Below one will work (It is not very complex expression)
ng-show="User=='admin' || User=='teacher'"
Here element will be shown in UI when any of the two condition return true (OR operation).
Like this you can use any expressions.
This will work if you do not have too many expressions.
Example: ng-show="form.type === 'Limited Company' || form.type === 'Limited Partnership'"
For any more expressions than this use a controller.
I generally try to avoid expressions with ng-show and ng-hide as they were designed as booleans, not conditionals. If I need both conditional and boolean logic, I prefer to put in the conditional logic using ng-if as the first check, then add in an additional check for the boolean logic with ng-show and ng-hide
Howerver, if you want to use a conditional for ng-show or ng-hide, here is a link with some examples: Conditional Display using ng-if, ng-show, ng-hide, ng-include, ng-switch
Some of these above answers didn't work for me but this did. Just in case someone else has the same issue.
ng-show="column != 'vendorid' && column !='billingMonth'"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With