Angular 表单下拉菜单 1 用于在下拉菜单 2 中选择选项

Question

我有两个 Angular 形式的下拉菜单。一个是国家，另一个是国家拨号代码。当用户在第一个下拉列表中选择 USA 时，我想将第二个下拉列表更新为默认为 +1 作为拨号代码。否则，第二个下拉菜单应默认为占位符“选择国家代码”。我已经使用 javascript 成功完成了这项工作，但是 Angular 在提交时仍然认为表单无效。我尝试强制该字段在 javascript 中有效，但它似乎不起作用。有没有办法在 HTML 中使用 javascript 或 ng 命令来做到这一点？我想保持 html 的格式不变（即使用 select 和 options 标签）。

HTML：

<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="country" name="country" type="text"
ng-model="contactSession.country">
<option data-countryCode="UG" value="256">Uganda</option>
<option data-countryCode="UA" value="380">Ukraine</option>
<option data-countryCode="AE" value="971">United Arab Emirates</option>
<option data-countryCode="GB" value="44">United Kingdom</option>
<option data-countryCode="US" value="1">United States</option>
<option data-countryCode="UY" value="598">Uruguay</option>
<option data-countryCode="UZ" value="998">Uzbekistan</option>
</select>

<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="countryCode" name="countryCode" type="text"
ng-init="contactSession.countryCode = '1'"
ng-model="contactSession.countryCode">
<option value="" selected="selected">Select Country Code</option>
<option data-countryCode="UA" value="380">Ukraine (+380)</option>
<option data-countryCode="AE" value="971">United Arab Emirates(+971)</option>
<option data-countryCode="GB" value="44">United Kingdom (+44)</option>
<option data-countryCode="US" id="usaSelection" value="1">United States (+1)</option>
<option data-countryCode="UY" value="598">Uruguay (+598)</option>
</select>

JS：

    $('select[name=country]').change(function () {
    if ($(this).val() == '1') {
        document.getElementById("countryCode").value = document.getElementById("usaSelection").value;
    } else {
        document.getElementById("countryCode").value = "";
    }
});

Answer 1

我做了一个小提琴，但我不确定这是否与您的意图相同。

Change select box

<select ng-options="country.code as country.nameAndCode for country in countries"
        ng-model="selectedCountryAndCode"
        ng-change="changeCountryAndCode();"
        required>
    <option value="">Select Country Code</option>
</select>

如果你使用'ng-options'，它会让代码更简单。

.

.

更新

Here's updated fiddle.

据我了解，以下稍作修改。

.

.

.

最新更新

Here's another updated fiddle