AngularJS - Show and Hide multiple content

Question

In AngularJS, to simply show a field through an a tag, I would do in this way:

<div ng-show="aField">Content of aField</div>

<a ng-click="aField=true">Show aField</a>

until here, no problem. I would like now to put more buttons and fields so that, when I click on A it shows the content of A, then when I click on button B, content of A disappears and content of B appears.

How can I do this? Thank you.

UPDATE

Thank you everyone for your solutions, they works! Now, I am doing a template for every content of and because I have much data to show but all in the same structure.

Here the index.html

<div ng-model="methods" 
 ng-include="'templateMethod.html'" 
 ng-repeat = "method in methods">

here the script.js:

function Ctrl($scope) {
$scope.methods =
[ { name: 'method1',
    description: 'bla bla bla',
    benefits: 'benefits of method1',
    bestPractices : 'bestPractices',
    example: 'example'},

 { name: 'method2',
    description: 'bla bla bla',
    benefits: 'benefits of method2',
    bestPractices : 'bestPractices',
    example: 'example'} ];
}

and here the templateMethod.html:

<table>
 <tr>
   <td>
     <div ng-show="toShow=='{{method.name}}Field'">
     <h3>{{mmethodethod.name}}</h3>
     <p>    
       <strong>Description</strong>
       {{method.description}}
     </p>
     <p>    
       <strong>Benefits</strong>
       {{method.benefits}}
     </p>
     <p>
       <strong>Best practices</strong>
       {{method.bestPractices}}
     </p>
      <p>   
        <strong>Examples</strong>
        {{method.example}}
      </p>
    </div>
    </td>
    <td class = "sidebar">
      <ul>
         <li><a ng-click="toShow='{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>   
      </ul>             
    </td>
  </tr>
</table>

It works! But: if I click the first button and then the second one, the content of the first button do not disappear, it appears under the content of the first button... Problem with the repetition?

Thanks

I would recommend posting a new question. Answers posted so far don't reflect your updated question. — bekite
– bekite, Commented Oct 27, 2013 at 17:31
Here the new question: stackoverflow.com/questions/19621418/… — Colet
– Colet, Commented Oct 27, 2013 at 23:17

hiattp · Accepted Answer · 2013-10-27 12:40:55Z

It might be better to handle more complex logic in the controller, but in general think about the content of the directive strings as normal js:

<div ng-show="aField">Content of aField</div>
<div ng-show="bField">Content of bField</div>
<a ng-click="aField=true; bField=false">Show aField</a>
<a ng-click="aField=false; bField=true">Show bField</a>

Or use ng-show in concert with ng-hide:

<div ng-show="aField">Content of aField</div>
<div ng-hide="aField">Content of bField</div>
<a ng-click="aField=true">Show aField</a>
<a ng-click="aField=false">Show bField</a>

In the former strategy, nothing shows upon page load. In the latter, the bField content shows by default. If you have more than two items, you might do something like:

<div ng-show="toShow=='aField'">Content of aField</div>
<div ng-show="toShow=='bField'">Content of bField</div>
<div ng-show="toShow=='cField'">Content of cField</div>
<a ng-click="toShow='aField'">Show aField</a>
<a ng-click="toShow='bField'">Show bField</a>
<a ng-click="toShow='cField'">Show cField</a>

bekite · Accepted Answer · 2013-10-27 12:32:00Z

2

I'm guessing that you have a list of items and want to show each item content. Something an accordion component does.

Here is a plunker that shows how you could do it: http://plnkr.co/edit/UTf3dEImiDReC89vULpX?p=preview

Or if you want to display the content on the same place (something like a master detail view) you can do it like this: http://plnkr.co/edit/68DJHL582oY4ecSiiUdE?p=preview

edited Oct 27, 2013 at 12:32

answered Oct 27, 2013 at 12:22

bekite

3,4442 gold badges26 silver badges31 bronze badges

Comments

Matjaz Lipus · Accepted Answer · 2013-10-27 12:38:56Z

1

simply use one variable which content is visible. http://jsfiddle.net/gjbw7/

<a ng-click="show='a'">Show aField</a>

.

<div ng-show="show=='a'">Content of aField</div>

answered Oct 27, 2013 at 12:38

Matjaz Lipus

7111 gold badge5 silver badges10 bronze badges

Comments

codef0rmer · Accepted Answer · 2013-10-27 14:18:17Z

1

I would recommend to create a service in case your fields belong to different controllers.

Service:

App.factory('StateService', function() {
  return {
    openPanel: ''
  };
});

Injecting the service in a Controller:

App.controller('OneCtrl', function($scope, StateService) {
   $scope.stateService = StateService;
});

Finally using it a view:

<a ng-click="stateService.openPanel='home'">Home</a>
<div ng-show="stateService.openPanel == 'home'">Content of Home</div>

Demo: http://jsfiddle.net/codef0rmer/BZcdu/

answered Oct 27, 2013 at 14:18

codef0rmer

10.5k9 gold badges55 silver badges78 bronze badges

Comments

Hossain Muctadir · Accepted Answer · 2013-10-27 11:53:46Z

0

Try this way.

<div>{{content}}</div>
<a ng-click="content='a'">Show aField</a>
<br>
<a ng-click="content='b'">Show bField</a>
<br>
<a ng-click="content='c'">Show cField</a>
<br>
<a ng-click="content='d'">Show dField</a>
<br>
<a ng-click="content='e'">Show eField</a>
<br>
<a ng-click="content='f'">Show fField</a>

answered Oct 27, 2013 at 11:53

Hossain Muctadir

3,6361 gold badge22 silver badges33 bronze badges

1 Comment

Colet Over a year ago

Thank you everyone for your solutions, they works! Now, I am doing a template that will be repeated for every content of <div> and <a> because I have much data to show but all in the same structure. Here the template:

simalexan · Accepted Answer · 2013-10-27 16:28:04Z

0

Take a look at the ng-switch directive.

<div ng-switch="aField">
  <div ng-switch-when="someValue1">
      HTML content that will be shown when the aField variable value is equal to someValue1
  </div>
  <div ng-switch-when="someValue2">
      HTML content that will be shown when the aField variable value is equal to someValue2
  </div>
  <div ng-switch-default>
      This is where the default HTML content will go (if aField value is not equal to any of the ng-switch-when values)
  </div>
</div>

answered Oct 27, 2013 at 16:28

simalexan

4366 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS - Show and Hide multiple content

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related