如何基于布尔值在AngularJS中切换ng-show？

Question

我有一个表单来回复我想要显示的消息,只有当它isReplyFormOpen为真时,每次我点击回复按钮我想切换表单是否显示.我怎样才能做到这一点？

Answer 1

您只需要在ng-click事件上切换"isReplyFormOpen"的值

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
 <div ng-show="isReplyFormOpen" id="replyForm">
   </div>

Answer 2

基本上我解决了它的不 -ing的isReplyFormOpen时,它被点击价值:

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>

<div ng-init="isReplyFormOpen = false" ng-show="isReplyFormOpen" id="replyForm">
    <!-- Form -->
</div>

Answer 3

如果基于点击这里是:

ng-click="orderReverse = orderReverse ? false : true"

Answer 4

值得注意的是,如果控制器A中有一个按钮,并且要在控制器B中显示该元素,则可能需要使用点符号来跨控制器访问范围变量.

例如,这将无法正常工作:

<div ng-controller="ControllerA">
  <a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>

  <div ng-controller="ControllerB">
    <div ng-show="isReplyFormOpen" id="replyForm">
    </div>
  </div>

</div>

要解决此问题,请创建一个全局变量(即在Controller A或主控制器中):

.controller('ControllerA', function ($scope) {
  $scope.global = {};
}

然后为点击添加"全局"前缀并显示变量:

<div ng-controller="ControllerA">
  <a ng-click="global.isReplyFormOpen = !global.isReplyFormOpen">Reply</a>

  <div ng-controller="ControllerB">
    <div ng-show="global.isReplyFormOpen" id="replyForm">
    </div>
  </div>

</div>

有关更多详细信息,请查看Angular-UI文档中的嵌套状态和嵌套视图,观看视频或阅读理解范围.