I am facing some difficulties with implementing Font Awesome icons for radio buttons in an AngularJS ng-repeat. I have tried different solutions that involve using $parent within the ng-repeat, but none of them have worked for me so far. It is important for me to maintain the functionality of toggling the radio buttons when clicking on a row.
JSFIDDLE: http://jsfiddle.net/U3pVM/16692/
HTML
<div ng-app>
<div ng-controller="TodoCtrl">
<div class="container-fluid">
<div class="row" ng-repeat="i in integrations" ng-click="$parent.isChecked = !$parent.isChecked">
<div class="col-xs-1">
<input id="int{{$index}}" type="radio" ng-model="$parent.isChecked" name="radiointegration" ng-value="i.isChecked" />
<label for="int{{$index}}"></label>
</div>
<div class="col-xs-6" style="padding-top:10px">{{i.text}}</div>
<div class="col-xs-5" style="padding-top:10px">{{i.isChecked}}</div>
</div>
</div>
</div>
</div>
JS
function TodoCtrl($scope) {
$scope.integrations = [{
text: 'one',
isChecked: false
}, {
text: 'one',
isChecked: false
}, {
text: 'one',
isChecked: false
}, {
text: 'one',
isChecked: false
}, {
text: 'one',
isChecked: false
}];
}
CSS
.row:nth-of-type(even) {
background: #f3f8fe;
}
input[type=radio] {
display: none;
}
input[type=radio] + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=radio] + label:before {
content: "\f1db";
}
input[type=radio] + label:before {
letter-spacing: 10px;
}
input[type=radio]:checked + label:before {
content: "\f00c";
color: $harmonyColorGood
}
input[type=radio]:checked + label:before {
letter-spacing: 5px;
}
label {
margin-top: 7px;
margin-left: 10px;
font-size: 25px;
}
label:hover,
.row:hover {
cursor: pointer;
background: #f5f5f5;
}