Question

这似乎是一件容易的事，但我无法找到一种实现我想要的方式......

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

原始数组看起来像：

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

为了更容易理解，我准备了一个演示here来展示它的外观。

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

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

如果你们中的任何一个人知道如何以一种干净的方式处理这种情况，我很想知道！

Answer 1

当您选择具有pickItem功能的项目时，您可以更改item.check属性。但是，当您使用标签检查单选按钮时，不会更改它。所以这种模式变得不同步。可能的解决方案是在无线电上添加ng-focus="pickItem(item)"以修复模型，以防使用标签。

这是固定代码，我也将HTML更正为错误，但缺少</label>：

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

演示： https://jsfiddle.net/rfgpz367/3/

专注于输入应选择一个单选按钮

1 个答案: