角板更换一个click事件 [英] Angular panel replace with a click event

问题描述

我有引导下角应用：这里是 plunker

I have the following angular app with bootstrap: Here is the 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>

当我点击的 + 按钮旁边的我的学术课程，我想应用程序来取代它旁边的面板，上面写着 1级 - .. programlist 中提到的JSON课程列表的下拉列表中选择新的面板> > app.js 。我如何解决这个？

When i click on the + button next to the My Academic Programs, i would like the app to replace the panel next to it that says Tier 1-.. with a new panel which would have a dropdown of a list of courses from the json mentioned in the programlist in app.js. How do i approach this?

推荐答案

当你点击加号图标，设置一个变量，它控制面板是可见的：

When you click the plus icon, set a variable that will control which panel is visible:

ng-click="display.addprogram = true"

然后使用 NG-节目切换的可见性1级 - .. 面板：

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

创建另一个小组举行下拉列表中，并使用 NG-节目再度但相反的情况：

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

然后建立这个面板内的下拉菜单。这里是一个什么都不做比切换两个面板的知名度更多的例子。你可能会创建一个真正做一些事的选择功能，然后切换的可见性。

Then create the dropdown inside this panel. Here is an example that does nothing more than toggle the visibility of the two panels. You will probably create a function that actually does something with the selection, and then toggles the visibility.

<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

Here is a working demo: http://plnkr.co/edit/gcnuuMUct5ghOkaIX6cF?p=preview

请注意 - 我合并两个控制器合为一体，这样既会很容易获得的 display.addprogram 变量

Note - I consolidated two controllers into one, so that both would have easy access to the display.addprogram variable.

这篇关于角板更换一个click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！