AngularJS-显示和隐藏多个内容

在AngularJS中，为了简单地通过a标记显示字段，我会这样做：

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

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

这里是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>

{{mmethodethod.name}

说明
{{method.description}}


好处
{{method.benefits}}


最佳实践
{{method.bestPractices}


示例
{{method.example}}


{{method.name}}

它起作用了！ 但是：如果我点击第一个按钮，然后点击第二个按钮，第一个按钮的内容不会消失，它会出现在第一个按钮的内容下。。。 重复有问题吗

谢谢

试试这个方法

<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>

{{content}
远播


秀场


秀场


显示数据场


秀场


秀场

在控制器中处理更复杂的逻辑可能更好，但一般来说，将指令字符串的内容视为普通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>

在前一种策略中，页面加载时不显示任何内容。在后者中，

b字段

内容默认显示。如果您有两个以上的项目，可以执行以下操作：

<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>

aField的内容
B字段的内容
cField的内容
远播
秀场
秀场

我猜您有一个项目列表，希望显示每个项目的内容。手风琴组件所做的事情

下面是一个plunker，它展示了您如何做到这一点：

---

或者，如果您希望在同一位置显示内容（类似于主详细视图），您可以这样做：

只需使用一个内容可见的变量即可

Show aField

aField的内容

如果您的字段属于不同的控制器，我建议您创建一个服务

服务：

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>

将服务注入控制器：

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>

最后使用它作为视图：

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>

查看指令

<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>

当aField变量值等于someValue1时显示的HTML内容
当aField变量值等于someValue2时显示的HTML内容
这是默认HTML内容的位置（如果aField值不等于任何ng开关的when值）

感谢大家提供的解决方案，它们很有效！现在，我正在做一个模板，它将对和的每个内容重复，因为我有很多数据要显示，但都在相同的结构中。这里是模板：我建议发布一个新问题。目前发布的答案并不反映您的最新问题。以下是新问题：