Question

我有以下带引导程序的角度应用程序：这是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-..的面板使用新面板，可以从 app.js 中的programlist中提到的json下载一系列课程。我该如何处理？

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。

角度面板替换为单击事件

2 个答案: