使用Font Awesome和AngularJs創建複選框

Question

我想使用Font Awesome和AngularJS創建複選框。我想以這樣的方式使用它，我不必編寫太多JavaScript來使其工作。

到目前爲止，我已經嘗試過。

<li ng-repeat="item in items" ng-class="{'fa fa-check':isSelected(item)}"> 

</li> 

我想用fa-dot-circle-o類選擇廣播fa-circle-o爲未選擇的單選。

我也想將這些圖標的顏色從黑色更改爲藍色。

Answer 1

我使用下面的代碼來解決這個問題：

<li> 
     <li ng-repeat="item in UserOptions" style="padding-left: 15px;padding-bottom:2px;"> 
      <i ng-class="item.checked? ' fa fa-check-square-o fa-2x' : 'fa fa-square-o fa-2x'" 
         ng-click="item.checked = !item.checked" style="color:#65B8E2;" > 
          </i><span>&nbsp;&nbsp;{{item.name}}</span> 
     </li> 
</li> 

在contrller USEROPTIONS看起來是這樣的：

$scope.UserOptions= [ 
       { 
        name: 'XXXXX', 
        checked: false, 
        val: '1' 
       }, 
       { 
        name: 'YYYY', 
        checked: false, 
        val: '2' 
       }, 
     ];