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

Posted 2023-02-22

【中文标题】将单选按钮绑定到复杂对象可防止选中

【英文标题】：Binding radio button to complex object prevents selected

【发布时间】：2016-05-21 22:37:15

【问题描述】：

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

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

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

"name":"kran", "size":"2"

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

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

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

我该如何解决这个问题？

【问题讨论】：

ng-value 需要字符串而不是对象。 Angular Docs - ngValue

这不是真正的解决方案，绑定到复杂对象似乎工作正常，除了“检查”功能。

【参考方案1】：

我一直在努力获得公认的答案，我怀疑这是因为 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/>

【参考方案2】：

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

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

【讨论】：

这样我只会将名称保存到我的模型中，对吗？我想要整个对象。查看我更新的问题。

没有。该值只是显示。选择名称时选择整个对象。试试看。

我做到了。将 ng-value 更改为 formData.name 会导致所有单选按钮始终被选中：/ 但我应该将它绑定到 style.name 对吗？因为 style 是我正在迭代的数组中的元素？

对不起，我没有检查第一个代码示例。这个应该可以的。

$event.stopPropagation() 对输入对象不起作用，但我在 make 周围放置了一个标签，该标签在单击时调用该方法，然后使用了有效的 $event.stopPropagation()。非常感谢。