在AngularUI的折叠指令中使用条件语句

我可以在AngularUI的collapse指令中添加条件语句吗？在AngularUI的折叠指令中使用条件语句

我具有以下设置，其中有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。

来源

2013-05-09 Evil Closet Monkey

我没有使用AngularUI，但我猜''崩溃'期待一个表达。删除大括号：'collapse =“radioPurpose =='other'”' – Martin 2013-05-09 20:11:29

呃，我发誓我试过了......但我想不是。现在工作！ – 2013-05-09 20:27:25

p.s.，如果你把这个答案形式，我可以接受它。 – 2013-05-09 21:56:22

复制答案：

我没有用过AngularUI，但我猜collapse预期的表现。删除大括号：collapse="radioPurpose == 'other'"

来源

2013-05-10 06:57:54 Martin

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

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

来源

2013-05-09 21:13:12

在我的情况下，我也在寻找与崩溃相关的动画。它是受控环境中受控平台上的简单应用程序，因此该解决方案适合我们的需求。 – 2013-05-09 21:55:48

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

但是，我明白了S McCrohan的意思，因为我在我的应用程序中遇到问题。表格的折叠无法在我的应用程序中完全运行，因为它折叠了，但可以看到顶部的一行。它似乎要求你分开的div，即与崩溃和div与跨班＃类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-23 08:17:09 Pixic

在AngularUI的折叠指令中使用条件语句

回答

相关问题