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="[phone]"
           ng-model="phoneNum"
           class="form-control"/>
</div>

编辑：我收到了一个非常有用的答案，非常适合这种特定情况（请参见下文）。但是我也想知道是否有一种概括解决方案的方法，以便它适用于多个无线电按钮组。

Answer 1

这样做，单击文本字段，然后rb select（但是光标停留在文本字段中），单击RB和RB Select，并且光标进入文本字段。

您也可以使用NG模型的价值等执行此操作，但是Meh。这是裸露的金属想法。如果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="[phone]"/>
</div>