Question

我有一个行，面板和一个在加载时关闭的div。

当我点击面板然后div应该出现，行和面板应该消失，当我点击 X 然后面板和行应该出现。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 margin_text">
    <div class=" font-thin pull-left margin_top_4 padding_left_20">
      <span class="font_size_17 ">Discussion Forum</span>
    </div>
  </div>
</div>


<div class="panel panel-default">
  <div class="panel-header" ng-click="open_div=true">Click me</div>
</div>


<div ng-show="open_div">
  Div Opened <span>X</span>
</div>

当我点击点击我时，div应该打开，讨论论坛的行和面板应该消失。当我点击 X 时，该div应该关闭，面板和行应该出现。

Answer 1

使用相同的open_div进行隐藏。

同样，您可以使用ng-hide指令进行隐藏。

＆＃13;

<html ng-app>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div ng-show="!open_div" class="row">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 margin_text">
      <div class=" font-thin pull-left margin_top_4 padding_left_20">
        <span class="font_size_17 ">Discussion Forum</span>
      </div>
    </div>
  </div>


  <div ng-show="!open_div" class="panel panel-default">
    <div class="panel-header" ng-click="open_div=true">Click me</div>
  </div>


  <div ng-show="open_div">
    Div Opened <span ng-click="open_div=false">X</span>
  </div>
</body>

＆＃13;

Answer 2

这不是最好的解决方案。但它有帮助。

<div class="panel panel-default">
    <div class="panel-header" ng-click="open_div= true" ng-init="open_div=false">Click me</div>
</div>

<div ng-show="open_div">Div Opened <span ng-click="open_div= false">X</span>

Angular js：在点击面板上打开div并关闭它自己

2 个答案: