javascript - 与AngularJS折叠时如何在按钮上切换图标？

我有这个按钮

<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方法可以做到吗？

最佳答案

我认为这可以解决问题:

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

在这种情况下，当i为true时，您的icon-resize-small将具有isCollapsed类，而当其为true时，将具有icon-fullscreen类。这是documentation。

将键/值对的对象传递给ngClass时，键代表的类将在其值评估为true时应用。

关于javascript - 与AngularJS折叠时如何在按钮上切换图标？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17994092/