Angularjs 关注输入应选择一个单选按钮

这似乎是一件容易做到的事情，但我找不到一个整洁的方式来实现我想要的

我有一些行，其中包含从作用域中的数组中获取的值。这些行还包含一个无线电输入，其中一行包含一个文本输入

原始阵列看起来像：

$scope.items = [
    {name: 'one', value: 1, checked: true},
    {name: 'two', value: 2},
    {name: 'custom', value: 0, custom: true}
];

为了便于理解，我准备了一个演示来展示它的外观

预期的行为是在初始化时选择第一行。然后专注于文本输入，应检查相应的无线电输入。 当您第一次关注输入时，这种行为似乎运行良好。之后，如果选中了另一个单选按钮，则在输入中聚焦不会勾选匹配的单选按钮

我尝试将整行或输入包装到链接到单选按钮的标签中，但也不起作用

---

如果你们中有人知道如何巧妙地处理这种情况，我很想知道

当您使用

pickItem

功能选择项目时，您可以更改item.check属性。但是，当您检查带有标签的单选按钮时，不会更改它。因此，这种方式使模型变得去同步化。可能的解决方案是在收音机上添加

ng focus=“pickItem（item）”

，以及在使用标签的情况下修复型号

这是固定的代码，我也对HTML进行了少量更正，添加了缺失的

：

{{item.name}}：
{{item.value}}
x10={{10*item.value}

---

演示：

谢谢@dfsq！因此，基本上，我们正在重新实现JS中单选按钮的本机浏览器行为。我注意到你的解决方案只适用于Chrome，而不适用于Safari。你认为这是一个角度错误吗？将输入[type=tel]包装在标签[for]中解决了safari的问题。虽然不漂亮。。。

<div class="row" ng-repeat="item in items">
    <input type="radio" id="radio-{{$index}}" name="foo" ng-checked="item.checked" ng-focus="pickItem(item)">

    <label for="radio-{{$index}}">
        {{item.name}}:
        <span ng-if="!item.custom">{{item.value}}</span>
    </label>

    <input type="tel" ng-if="item.custom" ng-model="item.value" ng-focus="pickItem(item)">

    <label for="radio-{{$index}}">
        <span>x 10 = {{10 * item.value}}</span>
    </label>
</div>