点击显示/隐藏 - AngularJS

Question

这是我想要实现的目标。

页面加载时，section1将被隐藏。 当用户单击“高级”时，section1应该显示并且section2应该隐藏。 单击“基础”时，相反的情况应发生。 当我现在单击任何锚标记时，什么也不会发生。 我做错了哪些地方？

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

- Qwerty

---

请使用 ng-click 而不是 onclick。 - Matt Burrow

Answer 1

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

另外，除非您在ng-repeat中，否则不应使用ng-init（请查看文档）。

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

<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

- Omri Aharon

---

从文档中获取的信息： “ngInit 的唯一适当用法是为 ngRepeat 的特殊属性设置别名，如下面的演示所示。 除此之外，您应该使用控制器而不是 ngInit 在作用域上初始化值。” https://docs.angularjs.org/api/ng/directive/ngInit - Omri Aharon

我们不是在谈论最佳用例。你刚才说，除非你在ng-repeat中，否则ng-init不起作用。 - Ved

好的。已经解决了。问题是由于使用了 onlick 而不是 ng-click 引起的。 - Ved

@OmriAharon 为什么我们使用 ng-show="!advstatus" 而不是 ng-hide="advstatus"？我正在学习。 - user2284357

@NirjharLo 没关系，你可以使用任何一个。 - Omri Aharon

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>

- Rohan Sampat

Answer 3

非常简单，只需这样做：

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

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

- Vivek Sharma