logo标签列表

AngularJS - 显示和隐藏多个内容

angularjsangularjs-ng-clickng-show
4
在AngularJS中，要通过一个a标签简单地显示一个字段，我会这样做:
<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>

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

谢谢

1
我建议您发布一个新问题。目前为止发布的答案并不反映您更新后的问题。 - bekite
这是一个新的问题： http://stackoverflow.com/questions/19621418/angularjs-external-template?noredirect=1#comment29128675_19621418 - Colet
6个回答
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-hide 结合使用 ng-show：
<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>
2
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/

1

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

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

.

<div ng-show="show=='a'">Content of aField</div>
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>
谢谢大家的解决方案，它们都有效！现在，我正在制作一个模板，将为每个<div>和<a>的内容重复使用，因为我有很多数据要显示，但结构都相同。以下是模板： - Colet
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接