AngularJS图标随列表变化？

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

所以基本上我遇到的问题是，这里很简单，要么是“是”，要么是“否”，这会改变图标，但下一个选项卡只是一个名称列表，一旦你点击一个图标标签应该改变。我不确定如何解决这个问题。 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。