Question

我在AngularJS / Jade工作，当你点击某些东西时我需要更改一个图标。目前我有以下代码：

a(onclick='return false', href='#general', data-toggle='tab') General 
  span.glyphicon(ng-class='isGeneralChanged(selected) ? "glyphicon-ok-circle" : "glyphicon-adjust"')

然后低于：

.form-group
   label Has the design entered?
   toggle-switch(model='selected.general_engineer_made_inspection', on-label='Yes', off-label='No')

所以基本上我遇到的问题是，这里很容易，它是＆＃34;是＆＃34;或＆＃34;不＆＃34;并且会更改图标，但下一个选项卡只是一个名称列表，只需单击一个名称，选项卡中的图标就会更改。我不确定如何解决这个问题。 ng-click事件？

Answer 1

使用布尔值隐藏，显示，切换元素。 Angular使这很容易。（查看ng-show，ng-hide，ng-switch）

另外，我更喜欢以这种方式使用ng-class：

i.fa.fw(ng-class="{true:'fa-lock', false:'fa-unlock'}[locked]")

初始值在控制器中设置：

$scope.locked = true;

然后，将一个切换布尔值（以及类）的按钮添加到视图中。请注意ng-click="locked=!locked"

button(ng-click="locked=!locked" ng-switch="locked")
    span(ng-switch-when="true") Lock
    span(ng-switch-when="false") Unlock

我们也可以使用布尔来隐藏或显示我们喜欢的内容：

pre(ng-show="locked") Locked!
pre(ng-show="!locked) Unlocked!

这里是一个Plunk http://plnkr.co/edit/0PDT2cpQGwFKsu8h1hdg?p=preview，涵盖了上述所有内容（虽然是HTML，而不是Jade）。该演示使用FontAwesome。

AngularJS图标是否随列表一起变化？

1 个答案: