与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，在{1}}为真时为icon-fullscreen。这是documentation。

将键值对的对象传递给ngClass时，键表示如果值的值为true，将应用的类。

Answer 2

 <button ng-click="isCollapsed=!isCollapsed">
        <span   ng-class="{'glyphicon glyphicon-plus': isCollapsed, 'glyphicon glyphicon-plus': !isCollapsed }"></span>
      </button>