0

我可以将条件语句放入collapseAngularUI 的指令中吗？

我有以下设置，它有 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.

4

3 回答 3

0

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

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

于 2013-05-09T21:13:12.890 回答
0

从评论中复制答案：

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

于 2013-05-10T06:57:54.390 回答
0

我看到你解决了它，我也解决了，可以分享我的 JSFiddle；使用单选按钮切换折叠。

但是，我明白 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 -->
于 2013-07-23T08:17:09.317 回答