I'm currently working on creating a color configurator using AngularJS with radio buttons. Everything seems to be functioning properly - the data binds correctly, etc., but I'm encountering an issue setting the default color radio button as checked. According to the documentation, if the ng-model matches the radio value, the input should automatically be checked. However, I'm unsure if this only applies to strings and not objects.
Here's the HTML code:
<div ng-app ng-controller="ThingControl">
<ul >
<li ng-repeat="color in colors">
<input type="radio" ng-model="thing.color" value="{{color}}" />{{ color.name }}
</li>
</ul>
Preview: {{ thing }}
</div>
And here's the accompanying JavaScript:
function ThingControl($scope){
$scope.colors = [
{ name: "White", hex: "#ffffff"},
{ name: "Black", hex: "#000000"}
]
$scope.thing = {
color: $scope.colors[1]
}
}
You can view the example above in action by visiting this fiddle link: http://jsfiddle.net/xWWwT/1/
Thank you in advance for your assistance!