Looking for help with customizing alignment of images in a bootstrap/angular template? Check out the code snippet below:
<div ng-repeat="a in attributes">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-white" ng-click="align(a, 0)">
<input type="radio" name="{{a.id}}" ng-checked="{checked : (a.numericValue === 0)}">
Left
</label>
<label class="btn btn-white" ng-click="align(a, 1)">
<input type="radio" name="{{a.id}}" ng-checked="{checked : (a.numericValue === 1)}">
Center
</label>
<label class="btn btn-white" ng-click="align(a, 2)">
<input type="radio" name="{{a.id}}" ng-checked="{checked : (a.numericValue === 2)}">
Right
</label>
</div>
<div class="clip text-{{align(a)}}">
<img alt="#" ng-src="a.image">
</div>
</div>
The model is updated when you click on the button which then returns the correct css class. However, setting the initial checked status on the button seems to be an issue.
I've tried using expressions but without success:
{{(a.numericValue == 0) && 'checked' || ''}}
or simply:
checked="{{(a.numericValue == 0) && 'checked' || ''}}"
If anyone has suggestions on how to set the initial value, I'd greatly appreciate it!
Many thanks, Davide.