使用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 用于未选择的单选框。

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

- SharpCoder

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>

在控制器中，UserOptions 如下所示：

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

- SharpCoder