My directive is data-driven and generates radio buttons that have been styled to look like buttons.
While everything is functioning correctly, I would like to be able to specify an image URL for each item and dynamically display the corresponding image in ng-repeat (representing the button). Currently, the image URL is set in the CSS, limiting me to only one type of button. I need a more dynamic solution than that.
Any advice or pointers on how to achieve this would be greatly appreciated.
Thank you.
CSS
#buttonBox label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 13px;
margin-right: 46px;
font-size: 13px;
}
#buttonBox label:before {
content: "";
width: 60px;
height: 60px;
border-radius: 8px;
margin-right: 10px;
display: inline-block;
background-image: url('app/images/blue.png');
}
#buttonBox input[type=radio] {
display: none;
}
#buttonBox input[type=radio]:checked + label:before {
content: "";
background-image: url('app/images/yellow.png');
}
HTML
<da-buttons model="phone" items='phones' checked-index="0"></da-buttons>
Controller (these are the items)
$scope.phones = [ {
text: "Android",
group: "phoneGroup",
value: 9
}, {
text: "iOS",
group: "phoneGroup",
value: 10
}, {
text: "Blackberry",
group: "phoneGroup",
value: 11
}];
Directive
var directives = angular.module('myApp.directives');
directives.directive('daButtons', function () {
return {
restrict: 'E',
replace: true,
scope: {
model: '=',
items: '=',
checkedIndex: '@'
},
templateUrl: 'template/button-group.html',
link: function(scope) {
scope.onItemChange = function(item) {
scope.model = item;
};
}
};
});
Template: button-group.html
<div ng-repeat='item in items' id="buttonBox">
<input
type="radio"
name="{{item.group}}"
value="{{item.value}}"
ng-model="model.value"
ng-checked="$index==checkedIndex">
<label ng-click="onItemChange(item)">{{item.text}}</label>
</div>