将单选按钮绑定到复杂对象可防止选中

Question

我将单选按钮绑定到我的模型，如下所示：

<input type="radio" ng-model="formData.style" ng-value="{{style}}">

其中样式是具有多个属性的复杂对象。这是在 ng 重复中完成的，所以我有多个。样式可以是这样的：

{"name":"kran", "size":"2"}

等等..我想将整个对象绑定到模型，以便以后可以将其保存为状态并检索它以继续使用它。但是当我使用保存的"状态"更新模型时，UI 不会更新以显示选择了哪个单选按钮。我相信这与绑定到复杂对象而不是简单值有关，但我不太确定。

样式对象来自另一个数组，如下所示：

<div ng-repeat="style in data.styles">

如何解决此问题？

Answer 1

我的第一个答案有点错误。我在这里做了一个工作示例：

https://jsfiddle.net/lisapfisterer/szp3dudh/

.HTML

<form>
    <label>Radio-Buttons</label>
    <br/>
    <label ng-repeat="style in styles">
        <input type="radio" ng-model="formData.style" ng-value="style"> {{style.name}}
    </label>
    <br/>
</form>

AngularJs

   var first = { name: "First Name", value: "First Value" };
   var second = { name: "Second Name", value: "Second Value" };
   var third = { name: "Third Name", value: "Third Value" };
   $scope.styles = [first, second, third];
   $scope.formData = {};
   $scope.formData.style = $scope.styles[0];

Answer 2

我正在努力获得可接受的答案，我怀疑这是因为ng-repeat创建一个子作用域，因此必须绑定到$parent：

试试这个

.HTML

<form>
<label>Radio-Buttons</label>
<br/>
<label ng-repeat="style in styles">
    <input type="radio" ng-model="$parent.formData.style" ng-value="style"> {{style.name}}
</label>
<br/>