Ng-show/ng-hide vs. ng-class? Or something else

1

In my app, there are a few Angular UI-router states where I use ng-show to display different views in the same state. For instance, the signup state is two steps. So after they’ve created their account information, they’re next asked for address information.

Using a scope variable called state, I manipulate properties of the state to switch different views on and off. As an extra step, I even added $scope.$digest() after the $scope.state update. But I’m still noticing that the DOM update is noticeably slower on native iOS than in Ionic View or iOS Simulator.

I’ve read that ng-if performs slightly better but it also destroys the data after ui-router state transition, which I do not want.

My question is would using ng-class perform any better than ng-show? As I understand it, the two are not so different in terms of their procedure. They both listen on scope variables for a valid condition and add/remove a class accordingly.

If there is no worthwhile distinction between these two approaches, would anyone be able to recommend a different solution?

2

i would not use ng-show/ng-if/ng-class for such things.

i would create one abstract base state for that “wizard” with a base controller to hold all the data
this state has an own ui-view --> the child states hangs in.

So you can simply redirect from one state to another.
Then if you are using view-caching the back-navigation and back to the forward view will be faster.
Additional to that you could add something like step-indicator on top of the base-state to have something like a sub-navigation

3

In your case just use a ng-switch that performs very well and you can also add some animation for do the transitions between both,

4

ng-class and ng-show not work similar. ng-show implement "class=“ng-hide” if expression return false.

ng-hide class implement “display: none !important;” css property to element.

But ng-class use to implement css class based on expression like

if expression is Male then implement “blueBold” class other wise implement “pinkBold” class

Like ng-class="{‘Male’: ‘blueBold’, ‘Female’: ‘pinkBold’}[empInfo.Gender]"

You can learn more about ng-class and ng-show here

http://www.codeandyou.com/2015/08/Understanding-ng-if-ng-switch-ng-show-and-ng-repeat-directives.html
http://www.codeandyou.com/2015/02/different-way-to-work-with-ngclass.html

5

Would this not mean that there are transition animations?

6

you can activate and deactivate the transition animation with the $ionicHistory.nextViewOptions function :wink: