twitter-bootstrap 使用 AngularJS 折叠时如何切换按钮上的图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17994092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to switch the icon on a button when collapsing with AngularJS?
提问by Charles Hamel
I have this button
我有这个按钮
<button class="btn" ng-click="isCollapsed = !isCollapsed"><i class="icon-fullscreen"></i>Details</button>
And when I click on it I would like to switch for
当我点击它时，我想切换到
<button class="btn" ng-click="isCollapsed = !isCollapsed"><i class="icon-resize-small"></i>Details</button>
and get it back with icon-fullscreenwhen collapsing.
并icon-fullscreen在倒塌时取回它。
Is there an AngularJS way to do it?
有 AngularJS 的方法吗？
回答by Elise
I think this might do the trick:
我认为这可能会奏效：
<button class="btn" ng-click="isCollapsed = !isCollapsed">
<i ng-class="{'icon-resize-small': isCollapsed, 'icon-fullscreen': !isCollapsed}"></i>Details
</button>
In this case, your iwould have the class icon-resize-smallwhen isCollapsedis true, and icon-fullscreenwhen it's not true. Here is the documentation.
在这种情况下，您i将拥有该类，icon-resize-small何时isCollapsed为真，icon-fullscreen何时为假。这是文档。
When passing an object of key-value pairs to ngClass, the keys represent classes which will be applied if their values evaluate to true.
将键值对的对象传递给 ngClass 时，键表示如果它们的值评估为真则将应用的类。
回答by kupaff
<button ng-click="isCollapsed=!isCollapsed">
<span ng-class="{'glyphicon glyphicon-plus': isCollapsed, 'glyphicon glyphicon-plus': !isCollapsed }"></span>
</button>
