gpt4 book ai didi

AngularJS - 显示和隐藏多个内容

转载 作者:行者123 更新时间:2023-12-04 23:22:46 25 4
gpt4 key购买 nike

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

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

谢谢

最佳答案

在 Controller 中处理更复杂的逻辑可能会更好,但通常将指令字符串的内容视为普通 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-showng-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>

关于AngularJS - 显示和隐藏多个内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19617703/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com