Question

我可以将条件语句放入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。

Answer 1

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

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

Answer 2

来自评论的复制答案：

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

Answer 3

我看到你解决了它，我也是如此，可以分享我的JSFiddle; Toggle Collapse with Radiobuttons

但是，我看到了S McCrohan的意思，因为我的应用程序出了问题。桌面的崩溃在我的应用程序中没有完全发挥作用，因为它已折叠但显示顶行。它似乎要求你分开div，即一个div崩溃和一个带有span #class的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 -->

在AngularUI的崩溃指令中使用条件语句

3 个答案: