AngularJS 1.x：单击单选按钮和兄弟输入元素焦点

Question

我正在使用 Angular 1.5（使用 Bootstrap）处理表单，我想要以下功能：

当用户单击单选按钮时，我希望它专注于单选组中的输入文本元素，反之亦然（即用户单击输入文本元素并选中单选按钮）。

我在想我需要使用 ng-click 或 ng-change 并编写一个函数。但我被难住了。

代码如下：

<div class="radio-group">
    <input type="radio"
           name="phone"
           ng-model="contactMethod"
           value="phone"/>

    <label for="phoneNumber" class="radio-inline">Phone</label>

    <input type="text"
           id="phoneNumber"
           name="phoneNumberInput"
           ui-mask="(999) 999-9999"
           ng-model="phoneNum"
           class="form-control"/>
</div>

编辑：我收到了一个非常有用的答案，非常适合这种特定情况（见下文）。但我也想知道是否有办法概括解决方案，使其适用于多个单选按钮组。

Answer 1

这样做，单击文本字段并且RB选择（但光标停留在文本字段中），单击RB并且RB选择并且光标进入文本字段。

您也可以使用 ng-model 等的值来执行此操作，但是嗯。这是裸机的想法。如果 RB 已被选中，您可能需要添加检查以将其短路等等。

<script>
function onElemClick(elem) {
  if ( elem.id === 'phone_rb' ) {
    document.getElementById('phoneNumber').focus();
  } else if ( elem.id === 'phoneNumber' ) {
    document.getElementById('phone_rb').checked = 'checked';
  }
}
</script>

<div class="radio-group">
    <input type="radio"
           id="phone_rb"
           name="phone"
           onclick="onElemClick(this)"
           value="phone"/>

    <label for="phoneNumber">Phone</label>

    <input type="text"
           id="phoneNumber"
           name="phoneNumberInput"
           onclick="onElemClick(this)"
           ui-mask="(999) 999-9999"/>
</div>