AngularJS，如何在点击时更改fontawesome图标？ （NG-点击）

Question

我想要一个复选框，所以当你点击默认的FontAwesome空框（fa-square-o）时，它会被这个图标（fa-check-square-o）改变。

我怎么能用AngularJS做到这一点？我需要在控制器中放一个函数并从ng-click调用它？什么是正确的功能？

我在Jquery中找到了我需要的东西，但是我喜欢只使用角度：

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

如果可能的话帮助我在Angular中转换它！

Answer 1

两部分：

1. 如果检查了某些东西，你需要一个包含布尔值的东西。我们可以使用这样的表达式来做到这一点：ng-click="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
}