html - 显示/隐藏 onclick - angularjs

Question

这就是我要实现的目标。

section1 将在页面加载时隐藏。当用户点击 Advanced 时，section1 应该显示，section2 应该隐藏。单击 Basic 时，应该会发生相反的情况。当我现在点击任何 anchor 标签时没有任何反应。我哪里错了。

<div class="container" ng-init="advstatus=true">
  <a href="#" onclick="advstatus=true">Basic</a>
  <br/>
  <a href="#" onclick="advstatus=false">Advanced</a>

  <div class="section1" ng-hide="advstatus">
    ///...
  </div>
  <section ng-show="advstatus" class="section2">
   ///...
  </section>
</div>

Answer 1

在 AngularJS 中，您需要使用 ng-click 而不是 onclick。

另外，除非你在 ng-repeat 中，否则不应该使用 ng-init，而你不是(看看 Docs ) .

您应该在 Controller 中设置变量:

<div ng-app ng-controller="myCtrl" class="container" >
  <a href="javascript:void(0);" ng-click="advstatus=true">Basic</a>
  <br/>
  <a href="javascript:void(0);" ng-click="advstatus=false">Advanced</a>

  <div class="section1" ng-show="!advstatus">
    Section 1
  </div>
  <section ng-show="advstatus" class="section2">
   Section 2
  </section>
</div>

Controller :

function myCtrl($scope) {
    $scope.advstatus = true;
}

JS Fiddle