4

I'm trying to make a toggle-thing in angular, I can't understand why it doesn't work.

I exepct that when i click the a-tag, the lower div should be displayed.

                <div>
                    <a href="#" ng-click='member = mathieu' class="mathieu">Lorem<br />Ipsum<span>Click for more</span></a>
                </div>

            <div ng-switch="member">
                <div ng-switch-when="mathieu">
                    <h3>Lorem ipsum</h3>
                </div>
            </div>

2 Answers 2

4

Yes, this works. I have put together a quick plunkr to test it:

http://plnkr.co/edit/9JqxRNC9X5U2bJrkbxZ9?p=preview

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="[email protected]" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
  <script src="app.js"></script>
</head>

<body>


  <a href="#" ng-click="member = 'mathieu'" class="mathieu">Lorem Ipsum                <span>Click for more</span>
      </a>
  <br />
  <a href="#" ng-click="member = ''" class="mathieu">
    <span>Click to reset</span>
  </a>
  </div>
  <div ng-switch="member">
    <div ng-switch-when="mathieu">
      <h3>Lorem ipsum</h3>
    </div>
  </div>
</body>

</html>
Sign up to request clarification or add additional context in comments.

Comments

2

mathieu needs to be a string value. By itself it will resolve to undefined. I think you are looking for something like this:

<div>
    <a href="#" ng-click="member = 'mathieu'" class="mathieu">Lorem<br />Ipsum<span>Click for more</span></a>
</div>

<div ng-switch="member">
    <div ng-switch-when="mathieu">
        <h3>Lorem ipsum</h3>
    </div>
</div>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.