javascript - 使用 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>

在这种情况下，当 isCollapsed 为真且 icon- fullscreen 当它不是真的。这是 documentation .

当将键值对对象传递给 ngClass 时，键表示在其值评估为真时将应用的类。