current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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

share|improve this question
 
I would recommend posting a new question. Answers posted so far don't reflect your updated question. –  bekite Oct 27 '13 at 17:31
 
Here the new question: stackoverflow.com/questions/19621418/… –  Colet Oct 27 '13 at 23:17
add comment

6 Answers

up vote 1 down vote

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

share|improve this answer
add comment
up vote 1 down vote

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>
share|improve this answer
add comment
up vote 1 down vote

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/

share|improve this answer
add comment
up vote 0 down vote

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>
share|improve this answer
 
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: –  Colet Oct 27 '13 at 15:41
add comment
up vote 0 down vote

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>
share|improve this answer
add comment
up vote 0 down vote

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>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.