Question

这就是我想要实现的目标。

section1将在页面加载时隐藏。当用户点击Advanced时，第1部分应显示＆amp;第2节应该隐藏。单击Basic时，会发生相反的情况。现在点击任何锚标签时没有任何反应。我哪里错了。

<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-init不应该被使用，除非你在ng-repeat，而你不是Docs。< / p>

您应该在控制器中设置变量：

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

控制器：

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

JS Fiddle

Answer 2

这个很容易理解

   <div class="section1" ng-show="state1">
        Section 1
    </div>
    <div class="section2" ng-show="state2">
        Section 2
    </div>
    <input type="button" value="Advance" ng-click="sec1_show()" />
    <input type="button" value="Basic" ng-click="sec2_show()" />

    <script>

        function homecntrl($scope) {
            $scope.state1 = false;
            $scope.state2 = true;
            $scope.sec1_show = function () {
                $scope.state1 = true;
                $scope.state2 = false;
            };
            $scope.sec2_show = function () {
                $scope.state2 = true;
                $scope.state1 = false
            };
        };
    </script>

Answer 3

这很简单：

<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>

<div ng-if="hideShow">hide and show content ...</div>

显示/隐藏onclick - angularjs

3 个答案: