angularjs - 如何在 AngularJS 中点击不同的链接时显示/隐藏不同的数据？

Question

我想在点击不同按钮时显示不同的文本。一次只能显示一个文本。

例如。如果我选择每月，它应该仅显示文本每月。如果我单击“季度”，它应该仅显示“季度”。

默认情况下每月应加载到页面上

<div ng-app="">
  <h1>Ng-show & ng-hide</h1>
  <p class="description">Click on the "show"-link to see the content.</p>
  <a href="" ng-click="month=true">Monthly</a>
  <a href="" ng-click="quarter=true">Quarterly</a>


 <div class="wrapper">
   <p ng-show="month || !quarter">Monthly</p>
   <p ng-show="quarter || !month">Quarterly</p>
</div>

</div> 

查看我的代码 Codepen

Answer 1

你应该摆脱你观点中的逻辑。尝试在 Controller 上计算应用程序的逻辑，这样您的 View 会更清晰且更易于测试。试试这个:

<div ng-app="">
  <h1>Ng-show & ng-hide</h1>
  <p class="description">Click on the "show"-link to see the content.</p>
  <a href="" ng-click="setActive('montly')">Monthly</a>
  <a href="" ng-click="setActive('quarterly')">Quarterly</a>


  <div class="wrapper">
    <p ng-show="isActive('montly')">Monthly</p>
    <p ng-show="isActive('quarterly')">Quarterly</p>
  </div>

</div> 

并且，在 Controller 上:

$scope.setActive = function (name) {
  $scope.thing = name; }

$scope.isActive = function (name) {
  return ($scope.thing == name); } // Returns false if thing is different.

我回答过类似的问题here和 this是由此产生的工作 Plunker。如果您需要，我可以更好地解释。