How to replace a child div on it's existing parent div using angularjs?

Question

I have the following code.

html:

<div ng-controller="Test">
         <div ng-click="first()" ng-hide="seconddiv">First
           <div ng-click="second()" ng-show="seconddiv">Second</div> 
         </div>
    </div>

js:

var app = angular.module('app',[]);

app.controller('Test',function($scope){
    $scope.first = function(){
    alert("first clicked");
  }
  $scope.second = function(){
    alert("second clicked");
  }
});

On executing the above code:

a). I should see only First by default(I can see one now: First) - it is fine now

b). then, if I click on First, then it should execute it's first() method, then First should be replaced with Second(on UI) - it's not coming

c). then, if I click on Second, then it should execute it's second() method only, (it should not execute any other methods like first() except second() method) - it's not coming

I request you to please help me regarding this that how can we do this? Thanks in advance!

Please note that Html <div> structure should not change, so it should be same.

Created Fiddle .

This isn't going to work; if you hide the first div, you are also hiding it's contents, which happen to be the second div as well as the text. Even if you make the appropriate changes to your code, your HTML structure is wrong. Just as a side note, if you are concerned with the exact positioning of divs in an angular app, rather than the positioning of the content, you are probably not using angular to it's potential. — Claies
– Claies, Commented Jun 19, 2017 at 10:32
@Claies, Thanks for your reply, then in which way it may work ? — Guna
– Guna, Commented Jun 19, 2017 at 10:48

AdityaParab · Accepted Answer · 2017-06-19 10:32:43Z

Go the Angular Way. You will have just one function, toggle. Which will toggle the value of variable first from true to false and vice versa. Depending on value of first you will show either div with content as First or that with content as Second.

You will also refactor your HTML a bit as follows

<div ng-controller="Test">
    <div ng-if="first" ng-click="toggle()">First</div>
    <div ng-if="!first"ng-click="toggle()">Second</div> 
</div>

And in your JS you will do

var app = angular.module('app',[]);

app.controller('Test',function($scope){
    $scope.first = true;
    $scope.toggle = function(){
      $scope.first = !$scope.first;
    }
});

==== EDIT:

Alternatively, you don't even need the toggle function. Just use ng-click expression.

<div ng-controller="Test">
    <div ng-if="first" ng-click="first=!first">First</div>
    <div ng-if="!first"ng-click="first=!first">Second</div> 
</div>

And in JS

app.controller('Test',function($scope){
    $scope.first = true;
});

Collectives™ on Stack Overflow

How to replace a child div on it's existing parent div using angularjs?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related