在 AngularUI 的 Collapse 指令中使用条件语句答案

【问题标题】：Using a Conditional Statement in AngularUI's Collapse Directive在 AngularUI 的 Collapse 指令中使用条件语句
【发布时间】：2013-05-09 20:05:00
【问题描述】：

我可以在 AngularUI 的 collapse 指令中放置一个条件语句吗？

我有以下设置，它有 3 个单选按钮：

<div class="controls controls-row">
  <div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn" ng-model="radioPurpose" btn-radio="'meeting'">Meeting</button>
    <button type="button" class="btn" ng-model="radioPurpose" btn-radio="'tour'">Tour</button>
    <button type="button" class="btn" ng-model="radioPurpose" btn-radio="'other'">Other...</button>
  </div>
</div>

<div class="controls controls-row">
  <textarea class="span6" placeholder="Why are you here?" ng-model="textPurpose" collapse="{{ radioPurpose == 'other' }}"></textarea>
</div>

我希望textarea 根据radioPurpose 按钮的值显示/隐藏。我知道该语句在适当的时候评估为true，但指令总是显示textarea。

【问题讨论】：

我没有使用过 AngularUI，但我猜 collapse 需要一个表达式。去掉花括号：collapse="radioPurpose == 'other'"
呸，我发誓我已经尝试过了……但我想没有。现在工作！
p.s.，如果你把这个放在答案表格中，我可以接受。

标签： angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

从评论中复制答案：

我没有使用过 AngularUI，但我猜 collapse 需要一个表达式。去掉花括号：collapse="radioPurpose == 'other'"

【讨论】：

【解决方案2】：

折叠实际上并不是进行简单显示/隐藏的最佳方式。折叠项的高度设置为 0，而不是设置为 display: none；它可能并不总是具有您期望的效果。我建议改用ng-show 或ng-hide。

http://docs.angularjs.org/api/ng.directive:ngShow

【讨论】：

就我而言，我也在寻找与折叠相关的动画。它是受控环境中受控平台上的简单应用程序，因此该解决方案适合我们的需求。

【解决方案3】：

我看到你解决了，我也解决了，可以分享我的 JSFiddle； Toggle Collapse with Radiobuttons.

但是，我明白 S McCrohan 的意思，因为我的应用程序出现问题。表格的折叠首先在我的应用程序中没有完全起作用，因为它折叠了但让第一行可见。似乎需要您将 div 分开，即带有折叠的 div 和带有 span# 类的 div，如下所示...：

    <!-- START CHART AREA -->
    <div collapse="chartCollapsed">
       <div class="span12 well well-small">
          <div id="chart_div" style="width: 600px; height: 400px;"></div>
       </div>
    </div>
    <!-- END CHART AREA -->
    <!-- START TABLE AREA -->
    <div collapse="tableCollapsed">
       <div class="span12">
                               <!-- TABLE OMITTED -->
       </div>
    </div>
    <!-- END TABLE AREA -->

【讨论】：