与AngularJS折叠时如何切换按钮上的图标？

Question

我有这个按钮

<button class="btn" ng-click="isCollapsed = !isCollapsed"><i class="icon-fullscreen"></i>Details</button>

当我点击它时,我想切换

<button class="btn" ng-click="isCollapsed = !isCollapsed"><i class="icon-resize-small"></i>Details</button>

icon-fullscreen折叠时将其取回.

是否有AngularJS方法可以做到这一点？

Answer 1

我认为这可能会成功:

<button class="btn" ng-click="isCollapsed = !isCollapsed">
  <i ng-class="{'icon-resize-small': isCollapsed, 'icon-fullscreen': !isCollapsed}"></i>Details
</button>

在这种情况下,您i将有类icon-resize-small的时候isCollapsed是真实的,icon-fullscreen当它是不正确的.这是文档.

将键值对的对象传递给ngClass时,键表示在值评估为true时将应用的类.