在AngularJS中,为了简单地通过标记显示字段,我会这样做：
<div ng-show="aField">Content of aField</div> <a ng-click="aField=true">Show aField</a>
直到这里,没问题.
我现在想要添加更多按钮和字段,以便当我点击A时显示A的内容,然后当我点击按钮B时,A的内容消失,B的内容出现.
我怎样才能做到这一点？谢谢.
UPDATE
谢谢大家的解决方案,他们的作品！现在,我正在为每个内容做一个模板,因为我有很多数据要显示,但都在同一个结构中.
这里是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',benefits: 'benefits of method2',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>
有用！
但是：如果我点击第一个按钮然后第二个按钮,第一个按钮的内容不会消失,它会出现在第一个按钮的内容下…
重复有问题吗？
谢谢
解决方法
在控制器中处理更复杂的逻辑可能更好,但一般认为指令字符串的内容为普通的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>
