AngularJS: 单选按钮选中

Question

我是一名有用的助手，可以为您翻译文本。

我正在尝试使用AngularJS和单选按钮构建颜色配置器，一切似乎都正常，数据绑定等等......但是我无法设置默认颜色单选按钮的选中状态。根据文档，如果ng-model与单选按钮的值相同，则应自动选中输入框，但我不知道这是否仅适用于字符串而不适用于对象。

以下是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]
    }

}

您可以在这个fiddle中看到之前的例子： http://jsfiddle.net/xWWwT/1/ 非常感谢您的支持！

- Berto Yáñez

Answer 1

选择是由值中定义的字符串匹配的，因此可以执行以下操作：

value="{{color.name}}"

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

或者

value="{{color}}"

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

正如@bertez所提到的，使用ng-value是最佳解决方案。

ng-value="color"

- zs2020

---

是的，您的解决方案可行，因为value和model是字符串，但如果我按照您的方式操作，我只会将颜色名称绑定到thing对象:(正如您可以在这里看到的：http://jsfiddle.net/xWWwT/4/) - Berto Yáñez

@bertez 请尝试第二个解决方案。 - zs2020

最终在IRC中，有人称为dmco找到了解决方案：http://jsfiddle.net/xWWwT/6/使用ng-value！ :)（说明：该段文字是关于在AngularJS中使用ng-value解决问题的内容） - Berto Yáñez

为什么例如这个也能完美运行，但是当type='radio'时就不行了呢？<input type='checkbox' ng-init='checkStatus=false' ng-model='checkStatus' ng-click='doIfChecked(checkStatus)'> - mramosch

Answer 2

你是否已经尝试过ng-change指令？你可以使用表达式来设置它的选中状态，试一下这个。

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

- andre isaac

---

这是我唯一有效的方法。不是ng-model也不是ng-value。 - Agorreca