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

时间:2016-02-11 08:42:20

标签: javascript angularjs model radio-button

我将我的单选按钮绑定到我的模型上,如下所示:

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

样式是具有多个属性的复杂对象。这是在ng-repeat中完成的,所以我有多个。风格可能是这样的:

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

依此类推..我想将完整的对象绑定到模型,以便稍后将其保存为状态并将其恢复以继续使用它。但是当我用保存的&#34;状态更新模型时#34; UI不会更新以显示选择了哪个单选按钮。我认为这与绑定到复杂对象有关,而不是简单的值,但我并不确定。

样式对象来自另一个数组:

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

我该如何解决这个问题?

2 个答案:

答案 0 :(得分: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];

答案 1 :(得分:0)

我正在努力争取接受工作的答案,我怀疑是因为 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/>