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

Solution 1

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>

Solution 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

Solution 3

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/

Solution 4

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>

View more solutions

Comments

[Colet]

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: