使用Word Awesome和AngularJs创建复选框

时间:2014-10-17 04:39:38

标签: javascript css angularjs font-awesome

我想使用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

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

1 个答案:

答案 0 :(得分:4)

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

<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'
                },
      ];