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. 您可以使用ternary operator 来设置类：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">

此问题类似于AngularJS toggle class using ng-class，但不回答切换部分。

为了让它更有趣，如果您不想要额外的依赖项，您可以使用 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

你不需要使用jQuery，使用ngClass，根据变量持有的内容来改变类

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

Answer 3

您需要ngChecked。

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

ng-checked="MyMethod()"

最简单的例子：

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

脚本：

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