Question

我有一个Angular形式的两个下拉菜单。一个是国家，另一个是国家拨号代码。当用户在第一个下拉列表中选择USA时，我想将第二个下拉列表更新为拨号代码的默认值+1。否则，第二个下拉列表应该取消占位符＆＃34;选择国家代码＆＃34;。我已经使用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>

如果您使用＆＃39; ng-options＆＃39;，它会让代码更简单。

<强>更新

Here's updated fiddle

我理解后稍加修改。

最新更新

Here's another updated fiddle

Angular form dropdown 1用于选择下拉列表2中的选项

1 个答案: