AngularJS - 显示和隐藏多个内容

时间:2013-10-27 11:47:19

标签: angularjs angularjs-ng-click ng-show

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

有效! 但是:如果我点击第一个按钮然后第二个按钮,第一个按钮的内容不会消失,它会出现在第一个按钮的内容下... 重复有问题吗?

由于

6 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:2)

我猜你有一个项目列表,想要显示每个项目的内容。手风琴组件所做的事情。

以下是一个了解如何执行此操作的插件:http://plnkr.co/edit/UTf3dEImiDReC89vULpX?p=preview

或者,如果您想在同一个地方展示内容(类似主要详情视图),您可以这样做:http://plnkr.co/edit/68DJHL582oY4ecSiiUdE?p=preview

答案 2 :(得分:1)

只需使用一个内容可见的变量。 http://jsfiddle.net/gjbw7/

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

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

答案 3 :(得分:1)

我建议您创建一个服务,以防您的字段属于不同的控制器。

<强>服务

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/

答案 4 :(得分:0)

试试这种方式。

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

答案 5 :(得分:0)

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