使用Font Awesome与AngularJs创建复选框

Using Font Awesome with AngularJs to create checkboxes

本文关键字：创建 复选框 AngularJs Font Awesome 使用      更新时间：2023-09-26

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

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

我使用以下代码来解决此问题：

<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'
                },
      ];
相关文章：