Show/Hide onclick - angularjs

Question

This is what i'm trying to achieve.

section1 will be hidden at page load. When user clicks on Advanced, section1 should show & section2 should hide. On clicking Basic, the opposite should happen. Nothing happens when I click any of the anchor tags now. Where am i going wrong.

<div class="container" ng-init="advstatus=true">
  <a href="#" onclick="advstatus=true">Basic</a>
  <br/>
  <a href="#" onclick="advstatus=false">Advanced</a>

  <div class="section1" ng-hide="advstatus">
    ///...
  </div>
  <section ng-show="advstatus" class="section2">
   ///...
  </section>
</div>

use ng-click not onclick.

Matt Burrow
– Matt Burrow

2015-02-04 10:47:08 +00:00
Commented Feb 4, 2015 at 10:47 — Matt Burrow
– Matt Burrow, Commented Feb 4, 2015 at 10:47

Omri Aharon · Accepted Answer · 2015-02-04 10:55:50Z

2

In AngularJS you need to use ng-click instead of onclick.

Also, ng-init isn't supposed to be used unless you're in ng-repeat, which you are not (take a look at the Docs).

You should set up the variable in your controller:

<div ng-app ng-controller="myCtrl" class="container" >
  <a href="javascript:void(0);" ng-click="advstatus=true">Basic</a>
  <br/>
  <a href="javascript:void(0);" ng-click="advstatus=false">Advanced</a>

  <div class="section1" ng-show="!advstatus">
    Section 1
  </div>
  <section ng-show="advstatus" class="section2">
   Section 2
  </section>
</div>

Controller:

function myCtrl($scope) {
    $scope.advstatus = true;
}

JS Fiddle

edited Feb 4, 2015 at 10:55

answered Feb 4, 2015 at 10:48

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

7 Comments

Ved Over a year ago

where you found that ng-init doesn't work unless you're in ng-repeat?

Omri Aharon Over a year ago

@Ved Taken from the docs: "The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope." docs.angularjs.org/api/ng/directive/ngInit

Ved Over a year ago

We are not talking about the best case of uses. You just said that ng-init doesn't work unless you're in ng-repeat.

Ved Over a year ago

Ok. Got in. and the issue was because of onlick instead of ng-click.

Omri Aharon Over a year ago

@Ved Yep, that's the main problem. Changed the order to reflect importance.

|

Rohan Sampat · Accepted Answer · 2015-02-04 12:19:48Z

0

This one is easy to understand

   <div class="section1" ng-show="state1">
        Section 1
    </div>
    <div class="section2" ng-show="state2">
        Section 2
    </div>
    <input type="button" value="Advance" ng-click="sec1_show()" />
    <input type="button" value="Basic" ng-click="sec2_show()" />

    <script>

        function homecntrl($scope) {
            $scope.state1 = false;
            $scope.state2 = true;
            $scope.sec1_show = function () {
                $scope.state1 = true;
                $scope.state2 = false;
            };
            $scope.sec2_show = function () {
                $scope.state2 = true;
                $scope.state1 = false
            };
        };
    </script>

edited Feb 4, 2015 at 12:19

answered Feb 4, 2015 at 12:13

Rohan Sampat

9701 gold badge14 silver badges31 bronze badges

Comments

Vivek Sharma · Accepted Answer · 2017-04-05 13:22:59Z

0

Very simple just do this:

<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>

<div ng-if="hideShow">hide and show content ...</div>

answered Apr 5, 2017 at 13:22

Vivek Sharma

5975 silver badges9 bronze badges

Collectives™ on Stack Overflow

Show/Hide onclick - angularjs

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related