javascript - 根据 View 中的按钮单击切换内容

Question

我有一个小的 Angular 应用程序正在运行，但我被困在一些看起来如此简单的事情上! (这里是新的 Angular )。

场景: 我的页面上有两个按钮，可以切换其关联内容的显示。

几乎没有什么事情需要发生:

按钮: 1.应该是页面加载时的事件按钮(也显示其适当的内容) 2. 当单击其他按钮时，这应该更改事件状态(对于按钮和关联内容) 3. 如果单击事件按钮，则不会发生任何事情。它应该保持活跃。

不知道如何做到这一点。感谢所有帮助。

代码

<div class="toggle-btns">
  <button class="toggle-btns__btn toggle-btns__btn--active">Button 1</button>
  <button class="toggle-btns__btn" >Button 2</button>
</div>
<div class="content-one">
  <!-- content here -->
</div>
<div class="content-two">
  <!-- content here -->
</div>

Answer 1

如果你无法弄清楚这一点，那么你显然还没有努力;)

我会做这样的事情:

<div class="toggle-btns">
  <button class="toggle-btns__btn" ng-click="content = 1" ng-class="{  toggle-btns__btn--active: content == 1}">Button 1</button>
  <button class="toggle-btns__btn" ng-click="content = 2" ng-class="{  toggle-btns__btn--active: content == 2}">Button 2</button>
</div>
<div class="content-one" ng-show="content == 1">
  <!-- content here -->
</div>
<div class="content-two" ng-show="content == 2">
  <!-- content here -->
</div>

在你的 Controller 中:

angular.module('Blah')
  .controller('MainCtrl', ['$scope', function($scope) {
      $scope.content = 1;
});