AngularJS - Показать и скрыть несколько контента

В AngularJS, чтобы просто показать поле через тег, я бы сделал так:

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

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

пока здесь, без проблем. Теперь я хотел бы разместить больше кнопок и полей, чтобы, когда я нажимаю на A, отображалось содержимое A, а затем, когда я нажимаю кнопку B, содержимое A исчезает, а содержимое B появляется.

Как я могу это сделать? Спасибо.

ОБНОВИТЬ

Всем спасибо за ваши решения, они работают! Теперь я делаю шаблон для каждого содержимого, потому что у меня есть много данных, которые нужно показать, но все они находятся в одной структуре.

Здесь index.html

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

вот 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'} ];
}

и вот 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>

Оно работает! Но: если я нажимаю первую кнопку, а затем вторую, содержимое первой кнопки не исчезает, оно появляется под содержимым первой кнопки ... Проблема с повторением?

Спасибо


angularjs angularjs-ng-click ng-show
person Colet    schedule 27.10.2013    source источник
comment
Я бы рекомендовал разместить новый вопрос. Опубликованные до сих пор ответы не отражают ваш обновленный вопрос.   -  person bekite    schedule 27.10.2013
comment
Здесь новый вопрос: stackoverflow.com/questions/19621418/   -  person Colet    schedule 28.10.2013

Ответы (6)


arrow_upward
4
arrow_downward

Возможно, было бы лучше обрабатывать более сложную логику в контроллере, но в целом думайте о содержимом строк директив как о обычных 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>

Или используйте ng-show вместе с 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>

В первой стратегии при загрузке страницы ничего не отображается. В последнем по умолчанию отображается содержимое bField. Если у вас больше двух предметов, вы можете сделать что-нибудь вроде:

<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>
person hiattp    schedule 27.10.2013

arrow_upward
2
arrow_downward

Я предполагаю, что у вас есть список элементов, и вы хотите показать содержимое каждого элемента. Что-то делает компонент аккордеона.

Вот пример того, как это можно сделать: http://plnkr.co/edit/UTf3dEImiDReC89vULpX?p=preview

Или, если вы хотите отобразить контент в том же месте (что-то вроде основного подробного представления), вы можете сделать это следующим образом: http://plnkr.co/edit/68DJHL582oY4ecSiiUdE?p=preview

person bekite    schedule 27.10.2013

arrow_upward
1
arrow_downward

просто используйте одну переменную, содержимое которой видно. http://jsfiddle.net/gjbw7/

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

.

<div ng-show="show=='a'">Content of aField</div>
person Matjaz Lipus    schedule 27.10.2013

arrow_upward
1
arrow_downward

Я бы рекомендовал создать сервис на случай, если ваши поля принадлежат разным контроллерам.

Сервис:

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

Внедрение службы в контроллер:

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

Наконец, используя это представление:

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

Демо: http://jsfiddle.net/codef0rmer/BZcdu/

person codef0rmer    schedule 27.10.2013

arrow_upward
0
arrow_downward

Попробуйте так.

<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>
person Hossain Muctadir    schedule 27.10.2013
comment
Всем спасибо за ваши решения, они работают! Сейчас я делаю шаблон, который будет повторяться для каждого контента ‹div› и ‹a›, потому что у меня есть много данных, которые нужно показать, но все они находятся в одной и той же структуре. Вот шаблон: - person Colet; 27.10.2013

arrow_upward
0
arrow_downward

Обратите внимание на директиву ng-switch.

<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>
person simalexan    schedule 27.10.2013