Geek Answers Handbook

How can I ngShow and ngHide two different elements at the same time with AngularJS?

So, I have two exceptional elements:

<span>foo</span>
<span>bar</span>

And I added ngShow and ngHide:

<span ng-show="fooTime">foo</span>
<span ng-hide="fooTime">bar</span>

But now that these renderings, there is a second where they both show.

How can I make them show / hide at the same time?

+4
source share
2 answers

Use ngSwitch, not ngShow / ngHide:

<span ng-switch="fooTime">
    <span ng-switch-when="true">foo</span>
    <span ng-switch-when="false">bar</span>
</span>

Why?

When using separate ngShow / ngHides, each element gets a separate $ watch, which runs asynchronously, leaving the potential for a break between events. With ngSwitch, only one $ watch is set, so they must display at the same time.

How do I get to ngSwitch?

, , , CSS :

<style>
    [first] .fooTime {
        display: inline;
    }
    [second] .fooTime, [first] {
        display: none;
    }
</style>

<span ng-class="{'fooTime':fooTime}">
    <span first>foo</span>
    <span second>bar</span>
</span>

ngSwitch .

: , ngSwitch , , ngAnimate, 2 . .

+4

@eternalmatt... , css . ng-swtich . scss, scss css http://www.sassmeister.com/. , ajax spinner showSpinner.

<button class="fin-button no-outline" ng-class="{disabled: state==='disabled'}" ng-click="action()">
  <span ng-class="{'showSpinner': showSpinner}">
    <span class="text-first" fin-button-text>{{text}}</span>
    <span class="glyphicon glyphicon-repeat spinner" fin-button-spinner></span>
  </span>
</button> 


.fin-button {
    [fin-button-text] {
        display: inline;
    }
    [fin-button-spinner] {
        display: none
    }
    .showSpinner {
        [fin-button-text] {
            display: none;
        }
        [fin-button-spinner] {
            display: inline;
        }
    }
}

css..,

.fin-button [fin-button-text] {
  display: inline;
}

.fin-button [fin-button-spinner] {
  display: none;
}

.fin-button .showSpinner [fin-button-text] {
  display: none;
}

.fin-button .showSpinner [fin-button-spinner] {
  display: inline;
}

here be dragons , scss

// .... HERE BE DRAGONS ... ///
    // The following is used to hide show the spinner or the
    // button text. Needs to be done like this because ng-hide, ng-show,
    // ng-if, and ng-switch all put seperate watches even if you are conditioning
    // on the same vairable ... see this SO // http://stackoverflow.com/questions/20341288/how-do-i-ngshow-and-nghide-two-different-elements-at-the-same-time-with-angularj
0

More articles:


All Articles