角度面板替换为单击事件

Question

我有以下角度应用程序与bootstrap：这是plunker

<div class="panel col-lg-3 col-md-3 col-sm-2">
            <div class="" id="menu">

                <div ng-controller="mylistcontroller" class="" id="menu">               
                <br/>
                <h4><font color=#636363>My Academic Programs</font><button id="tooltip1" type="button" class="btn btn-default pull-right" data-toggle="tooltip" data-placement="right" data-original-title="Add a Program"><span class="glyphicon glyphicon-plus-sign pull-right"></span></button></h4>

                <div ng-repeat="prog in programs" class="list-group">

                    <a ng-repeat="list in prog.programstaken" href="#" class="list-group-item">

            {{list.program}}<span class="badge badge-info pull-right">{{list.completed}} / {{list.required}}</span>
            <progressbar class="progress-striped active" max="list.required" value="list.completed" type="{{getProgressType(list)}}">{{getPercentage(list)}}%</progressbar>

                  </a>              
                </div>
            </div>
            </div>

        </div>

当我点击我的学术课程旁边的+按钮时，我希望该应用程序替换它旁边的面板，其中包含一个新的面板，该面板将显示Tier 1-..来自json的课程列表下拉列表在提到programlist在app.js。 我该如何处理？

Answer 1

单击加号图标时，设置一个变量来控制哪个面板可见：

ng-click="display.addprogram = true"

然后使用ng-show切换Tier 1-..面板的可见性：

<div ng-show="!display.addprogram" ...> ...

创建另一个面板来保存下拉列表，并再次使用ng-show但条件相反：

<div ng-show="display.addprogram" ...> ...

然后在此面板中创建下拉列表。 这是一个例子，它只是切换两个面板的可见性。 您可能会创建一个实际上对选择执行某些操作的函数，然后切换可见性。

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Select <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="p in programs[0].programlist">
      <a ng-click="display.addprogram = false">{{p.program}}</a>
    </li>
  </ul>
</div>

这是一个有效的演示： http ： //plnkr.co/edit/gcnuuMUct5ghOkaIX6cF？p = preview

注意 - 我将两个控制器合并为一个，这样两者都可以轻松访问display.addprogram变量。

Answer 2

有很多方法可以解决它。 一个简单的解决方案是对您正在操作的两个HTML元素使用ng-show或ng-if指令。 您可以使用ng-click更改ng-show / ng-if绑定到的$ scope上的属性，并将其计算为true或false。