与列表AngularJS图标的变化？ | 与列表AngularJS图标的变化

本文介绍了与列表AngularJS图标的变化？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在AngularJS /翡翠的工作，我需要当你点击一些改变的图标。目前，我有以下code：

I'm working in AngularJS / Jade, and I need to change an icon when you click on something. Currently I have the following code:

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')

所以基本上我的问题是，在这里很容易，它是不是是或否，即改变图标，但下一个标签只是一个名称的列表，一旦你只需点击一个在图标标签应当改变。我不知道我怎么能解决这个问题。 NG-点击事件？

推荐答案

使用一个布尔隐藏，显示，切换元素。角使这很容易。（查找 NG-节目， NG-隐藏， NG-开关）

Use a boolean to hide,show,toggle elements. Angular makes this easy. (look up ng-show, ng-hide, ng-switch)

另外，我preFER使用纳克级是这样的：

Also, I prefer to use ng-class this way:

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

的初始值被设定在控制器：

The initial value is set in the controller:

$scope.locked = true;

然后，一个按钮，切换布尔（并且因此，类）被加入到图。注意 NG-点击=锁定=！锁定

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

我们还可以采用布尔隐藏或显示任何我们想：

We can also employ the boolean to hide or show whatever we'd like:

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

下面是一个普拉克（尽管在HTML中，没有玉）。该演示使用。

Here's a Plunk http://plnkr.co/edit/0PDT2cpQGwFKsu8h1hdg?p=preview that covers all of the above (albeit, in HTML, not Jade). The demo uses FontAwesome.

这篇关于与列表AngularJS图标的变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！