需要使用 angularjs 更改字形图标答案

【问题标题】：Need to change the glyphicon using angularjs需要使用 angularjs 更改字形图标
【发布时间】：2015-08-14 12:11:23
【问题描述】：

需要使用angularjs更改折叠面板的字形，下面是我尝试过的

<div class="panel-heading pan_hd1" ng-model="collapsed" ng-click="collapsed=!collapsed">
    Heading <span ng-class="{'glyphicon glyphicon-menu-down pull-right pan_arrow1': !isCollapsed, 'glyphicon glyphicon-menu-up pull-right pan_arrow1': isCollapsed}"></span>
</div>

请帮忙解决一下

【问题讨论】：

glyghicon 没有改变
<span class="glyphicon pull-right pan_arrow1 glyphicon-menu-{{collapsed ? 'up' : 'down'}}"></span>

标签： angularjs html angular-ui-bootstrap

【解决方案1】：

您的 var 名称不匹配。类的一个用途是isCollapsed，ng-click 的一个变化是collapsed。

ng-model 中可能也有问题，但老实说，我无法弄清楚你想在模型中保存什么。

<div class="panel-heading pan_hd1" ng-model="collapsed" ng-click="isCollapsed=!isCollapsed">Heading<span  ng-class="{'glyphicon glyphicon-menu-down pull-right pan_arrow1': !isCollapsed, 'glyphicon glyphicon-menu-up pull-right pan_arrow1': isCollapsed}"></span></div>

Working Fiddle

【讨论】：

是的，现在它正在工作，非常感谢您的帮助
您的代码更改图标但是，折叠功能不起作用，再次感谢您的帮助我得到了解决方案

【解决方案2】：

下面的代码正在运行

<div class="panel-heading pan_hd1" ng-model="collapsed" ng-click="collapsed=!collapsed">Heading<span  ng-class="{'glyphicon glyphicon-menu-down pull-right pan_arrow1': !collapsed, 'glyphicon glyphicon-menu-up pull-right pan_arrow1': collapsed}"></span></div>

感谢您的帮助。

【讨论】：