CODEWITHSUNDEEP
angularjsionic-framework
Reacting
Reacting

Reputation: 6123

in this case is better ng-hide/show or ng-if?

I am using Angular with Ionic on my application, I am having some issues with the ng-show so I decided to change and put ng-if instead, and now my app is working as I want, but I have some doubts. What about performance ? and is correctly what I am doing ?

this is how I have my code now:

        <div ng-if="betSlip.length >= 1">
          <div class="list betslip-item">
            <div class="item item-divider betslip-header">
              APPLY TO ALL
            </div>

and this is how I had it:

        <div ng-show="betSlip.length >= 1">
          <div class="list betslip-item">
            <div class="item item-divider betslip-header">
              APPLY TO ALL
            </div>

Update

What about ng-switch?

Upvotes: 0

Views: 695

Answers (1)

Dayan Moreno Leon
Dayan Moreno Leon

Reputation: 5435

ng-show/hide merely applies display:none style to your component, but the DOM element is still there, and is still there, ng-if on the other hand, creates the DOM element only if the condition is met, wether is better ng-if or show dependes on some factors, how often/fast is the condition switched, is this based on user interaction or on a very fast changing computational calculation?, also, how many bindings does your switched element has?

this is my criteria for when to use over the other

1 if the container is simple(none, or few bindings) and my dom is not too crowded already and doesn't have required fields or is not contained inside a form  i am ok using hide/show 
2 if my element contains a lot of bindings, my DOM is aleady extense, or the existance of the the content affects some how the result of the application ie(required fields or submit buttons inside a form) then i use ng-if or ng-switch

those are not documented but is my choice of handling dom insertions/display

Upvotes: 2

Related Questions