Angularjs: przycisk radiowy sprawdzony

Question

Próbuję zbudować konfigurator kolorów w AngularJS za pomocą przycisków radiowych i wszystko wydaje się działać, dane wiążą się, itp ... ale Nie mogę ustawić domyślnego radia przycisk zaznaczony. Jak widzę w dokumentach, jeśli model ng jest taki sam jak wartość radia, dane wejściowe powinny być automatycznie sprawdzane, ale nie wiem, czy działa to tylko dla łańcuchów, a nie dla obiektów.

Jest to HTML:

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

I to jest JS:

function ThingControl($scope){ 
    $scope.colors = [ 
     { name: "White", hex: "#ffffff"}, 
     { name: "Black", hex: "#000000"} 
     ] 

    $scope.thing = { 
     color: $scope.colors[1] 
    } 

} 

Można zobaczyć poprzedni przykład w tym skrzypce: http://jsfiddle.net/xWWwT/1/

Dzięki bardzo z góry !

Answer 1

Wybór jest dopasowane przez ciąg określonym w Wartość , więc można albo zrobić

value="{{color.name}}" 

$scope.thing = { 
    color: $scope.colors[1].name 
} 

lub

value="{{color}}" 

$scope.thing = { 
    color: JSON.stringify($scope.colors[1]) 
} 

Jak @bertez wspomniano, należy ng-value jest najlepszym rozwiązaniem.

ng-value="color" 

Answer 2

byłaś już próbował ng-zmiana dyrektywy? Możesz użyć wyrażenia, aby ustawić to zaznaczone, spróbuj tego.

<div ng-app ng-controller="ThingControl"> 
<ul > 
    <li ng-repeat="color in colors"> 
     <input type="radio" ng-model="thing.color" value="{{color}}" ng-checked="$index == 0" />{{ color.name }} 
    </li> 
</ul> 
Preview: {{ thing }} 
</div>