Angularjs：单选按钮检查 [英] Angularjs: radio button checked

问题描述

我试图使用单选按钮打造AngularJS颜色配置，一切似乎是工作，数据绑定，等等...但我不能设置检查默认的颜色单选按钮。正如我在文档中看到，如果NG-模式是一样的无线电值的输入应该是自动选中的，但我不知道这是否只是字符串而不是为对象的工作。

I'm trying to build a color configurator in AngularJS using radio buttons and everything seems to be working, the data binds, etc... but I'm not able to set the default color radio button checked. As I see in the docs if the ng-model is the same as the radio value the input should be auto-checked but I don't know if this only work for strings and not for objects.

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

和这是JS：

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

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

}

您可以看到在这个小提琴的previous例如：
http://jsfiddle.net/xWWwT/1/

You can see the previous example in this fiddle: http://jsfiddle.net/xWWwT/1/

非常感谢事先！

推荐答案

选择是由在字符串匹配的价值定义，因此你可以做

Selection is matched by the string defined in Value, so you can either do

value="{{color.name}}"

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

或

value="{{color}}"

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

由于@bertez提到的，使用 NG-值是最好的解决方案。

ng-value="color"

这篇关于Angularjs：单选按钮检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！