Question

我正在创建一个angularjs应用程序，在此我想最小化并最大化一个盒子。

现在我想在点击时隐藏一个div并打开另一个div

             <div class="msg" ng-hide="msg_div">
                    <a ng-click="msg_div = true"></a>
                some content
            </div>

             <div class="body" ng-show="body_div">
                  <a ng-click="body_div = true"></a>
              </div>

现在我想在隐藏第一个div上显示第二个div，反之亦然（显示隐藏第二个div的第一个div）。

任何形式的帮助都会得到满足。提前致谢

Answer 1

这个怎么样：

所以你几乎有一个你切换的布尔值。一个div隐藏，如果它是真的，另一个隐藏，如果它是假的。

而且，在控制器中尝试做任何逻辑总是更好。

angular.module('app', []).controller('PageController', function($scope) {
  $scope.showTopPanel = true;

  $scope.togglePanels = function() {
    $scope.showTopPanel = !$scope.showTopPanel;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="PageController">
  <div class="msg" ng-show="showTopPanel">
    <a ng-click="togglePanels()"><b>click to toggle</b></a>
    <div>
      top panel
    </div>
  </div>

  <div class="body" ng-hide="showTopPanel">
    <a ng-click="togglePanels()"><b>click totoggle</b></a>
    <div>
      bottom panel
    </div>
  </div>
</div>

Answer 2

试试这个

 <div class="msg" ng-hide="msg_div">
        <a ng-click="msg_div = true"></a>
    some content
</div>

 <div class="body" ng-show="msg_div">
      <a ng-click="msg_div = false"></a>
  </div>

Answer 3

只需在模板中调用函数而不是设置变量，这样您就可以获得更多控制权：

 <a ng-click="msg_div_click()"></a>

并在您的控制器中

$scope.msg_div_click = function(){
 $scope.msg_div = true;
 $scope.body_div = false;
}

如何在ng-hide和ng-show中应用条件 - AngularJs

3 个答案: