javascript - Angular 面板替换为单击事件

Question

我有以下带有 Bootstrap 的 Angular 应用程序:这是 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>

当我点击我的学术类(class)旁边的+按钮时，我希望应用程序替换其旁边显示Tier 1的面板-.. 带有一个新面板，其中包含 app.js 中 programlist 中提到的 json 中的类(class)列表下拉列表。我该如何处理这个问题？

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

注意 - 我将两个 Controller 合并为一个，以便两个 Controller 都可以轻松访问 display.addprogram 变量。