Replacing html in angular

Question

I have a first div tag on a webpage. It contains some angular scope variables. I want to replace it with a second div tag which also contains some other angular scope variables when something happens.

The first way I tried is to use "ng-show". I add both the first and the second div on html and set the first div tag to be visible and second one to be invisible by using ng-show and ng-hide.

<div ng-show="showFirstDiv">

</div>

<div ng-hide="showFirstDiv">

</div>

When I change $scope.showFirstDiv from true to false within the relevant controller and call $scope.$apply(), the ng-show and ng-hide attribute values change (after using inspecting element in a browser).

However, the visibility of those two html tags did not change. The first div didn't disappear even with ng-show="false" and second div did not show up even with ng-hide="false".

What should I do? Is there a better way to replace a div with another div in angular while both divs contain angular scope variables?

you are doing it wrong. why don't you use plnkr.co to show us your issue ? — maxisam
– maxisam, Commented Jan 20, 2015 at 22:05
i think your approach is correct, make sure you are setting boolean false/true and not "false" or "true". plnkr is next step. — ginman
– ginman, Commented Jan 20, 2015 at 22:10
This is the correct way to do it, you shouldn't need $scope.$apply() if it's working correctly. Would you mind showing more of your code? (eg Where the controller is defined in the HTML, the controller JS itself) — rwacarter
– rwacarter, Commented Jan 20, 2015 at 22:13
I would say Angular isn't being booted if you're not getting any result with ng-show="false"... try console.log('test') in one of your controllers to see if the controller is ran. — Robert
– Robert, Commented Jan 20, 2015 at 22:34

pdoherty926 · Accepted Answer · 2015-01-20 22:45:29Z

1

Have you tried ngIf?

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}.

<div ng-if="showFirstDiv">

</div>

<div ng-if="!showFirstDiv">

</div>

answered Jan 20, 2015 at 22:45

pdoherty926

10.5k5 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mordred Over a year ago

ng-show works just as well, but he does need to use the !showFirstDiv negation in the second div for the two to "swap" out.

Collectives™ on Stack Overflow

Replacing html in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related