使用 Font Awesome 和 AngularJs 创建复选框

【问题标题】：Using Font Awesome with AngularJs to create checkboxes使用 Font Awesome 和 AngularJs 创建复选框
【发布时间】：2014-10-17 04:39:38
【问题描述】：

我想使用 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 用于未选定的收音机。

我还想将这些图标的颜色从黑色更改为蓝色。

【问题讨论】：

标签： javascript css angularjs font-awesome

【解决方案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>

在控制器上 UserOptions 看起来像这样：

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

【讨论】：