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>