CODEWITHSUNDEEP
angularjsangularjs-ng-clickng-show
Colet
Colet

Reputation: 495

AngularJS - Show and Hide multiple content

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

Upvotes: 4

Views: 19847

Answers (6)

simalexan
simalexan

Reputation: 436

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>

Upvotes: 0

codef0rmer
codef0rmer

Reputation: 10530

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/

Upvotes: 1

hiattp
hiattp

Reputation: 2336

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>

Upvotes: 4

Matjaz Lipus
Matjaz Lipus

Reputation: 711

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>

Upvotes: 1

bekite
bekite

Reputation: 3444

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

Upvotes: 2

Hossain Muctadir
Hossain Muctadir

Reputation: 3626

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>

Upvotes: 0

Related Questions