javascript - How to switch the icon on a button when collapsing with AngularJS?

Question

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-fullscreen when collapsing.

Is there an AngularJS way to do it?

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 时应用的类。

Answer 2

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