CODEWITHSUNDEEP
javascriptcssangularjsfont-awesome
SharpCoder
SharpCoder

Reputation: 19183

Using Font Awesome with AngularJs to create checkboxes

I want to use Font Awesome along with AngularJS to create checkbox. I want to use it in such a manner that I don't have to write much JavaScript to make it work.

I have tried this so far.

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

</li>

I want to use fa-dot-circle-o class for selected radio and fa-circle-o for unselected radio.

I also want to change the color of of these icons from black to blue.

Upvotes: 3

Views: 4214

Answers (1)

SharpCoder
SharpCoder

Reputation: 19183

I am using following code to resolve this issue:

<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>

On the contrller UserOptions looks like this:

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

Upvotes: 4

Related Questions