AngularJS，如何更改单击时的字体图标？ （NG-点击）

Question

我正在尝试一个复选框，所以当您单击默认的FontAwesome空框（ fa-square-o ）时，此图标（ fa-check-square-o ）发生了变化。

如何使用AngularJS做到这一点？ 我需要在控制器中放置一个函数，然后从ng-click调用它？ 正确的功能是什么？

我在Jquery中找到了我需要的东西，但只想使用angular：

$("#checkBoxOn").click(function(event) {
$(this).find('i').toggleClass('fa-check-square-o');

如果可能的话，请帮我将其转换为Angular！

Answer 1

两部分：

1. 如果选中了某些内容，则需要一个包含布尔值的内容。 我们可以使用这样的表达式来做到这一点： ng-click="toggle = !toggle" 。 基本上，每次您使用该指令单击元素时，toggle都会变成以前没有的状态。
2. 您可以使用三元运算符设置类： i ng-class="toggle ? 'fa-check-square-o' : 'square-o'"></i>

在一起，这可能会变成这样：

<span ng-click="toggle = !toggle">
   <i ng-class="toggle ? 'fa-check-square-o' : 'square-o'"></i>
   Some text with the toggle here, that is also clickable.
</span>

根据您的其他问题，要隐藏基于此的另一个元素，可以向其添加ngHide ：

<table ng-hide="toggle">

这个问题类似于使用ng-class的AngularJS切换类 ，但是不能回答切换部分。

只是为了使其更有趣，如果您不希望额外的依赖项，可以使用unicode代替。 这使用ngShow和ngHide 。

<span ng-click="toggle=!toggle">
  <span ng-show="toggle">&#9744;</span>
  <span ng-hide="toggle">&#9745;</span>
  Some text with the checkbox here
</span>

Answer 2

您需要ngChecked 。

当您更改复选框时，请应用您的方法：

ng-checked="MyMethod()"

最简单的例子：

input type='checkbox' ng-checked='MyMethod()' />

脚本：

$scope.MyMethod = function() {
  //your logic
  return true; //checked
}

Answer 3

您不需要使用jQuery，可以使用ngClass来根据变量保存的内容更改类。

<checkbox ng-click="value = !value">
<span class="fa" ng-class="{'fa-square-o': !value , 'fa-check-square-o': value}"></span>