我有一个表单，myForm 用于输入用户信息。这些字段都与 Controller 中的模型相关联:
<input type="text" name="name" class="form-control"
ng-model="abc.user.name"
ng-model-options="{ updateOn: 'blur'}"
required>
如果我在您键入时追踪出 user 的值，那么这将按预期工作
{{abc.user | json}}
I see the name as typed.
{
"name": "John"
}
我的表单顶部有一个国家/地区菜单:
<select ng-model="abc.country.selectedCountry" name="country" ng-options="option.name for option in abc.country.options track by option.code" class="form-control"></select>
填充以下数据:
_this.country = {
options: [
{ name: 'United States', code: 'US' },
{ name: 'Canada', code: 'CA' },
{ name: 'United Kingdom', code: 'UK' },
{ name: 'France', code: 'FR' },
{ name: 'Japan', code: 'JP' },
{ name: 'Brazil', code: 'BR' }
],
selectedCountry: { name: 'United States', code: 'US' }
};
这会根据所选国家/地区更改页面上的某些内容。例如:
<div ng-if="abc.country.selectedCountry.code == 'US'" id="us">American stuff</div>
但是我该如何将“country”中选择的值AND分配给user对象呢？到目前为止，我所做的一切都打破了我的 ng-if 。
您可以在这里看到整个过程:https://plnkr.co/edit/uvZBb8OS55Bcop9SCDLM?p=preview
最佳答案
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as abc">
<div class="row">
<div class="col-md-4">
<p>Hello {{name}}!</p>
<form name="myForm" novalidate="">
<div class="row">
<div class="col-md-12">
<!--country selection-->
<div class="form-group">
<label>Country</label>
<select ng-model="abc.country.selectedCountry" name="country" ng-options="option.name for option in abc.country.options track by option.code" class="form-control" ng-change="updateUser(abc.country.selectedCountry)"></select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && !myForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="abc.user.name" ng-model-options="{ debounce: 200 }" required>
<p ng-show="myForm.name.$invalid && !myForm.name.$pristine" class="help-block">Enter your name.</p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<pre> {{abc.user | json}}</pre>
<div ng-if="abc.country.selectedCountry.code == 'US'" id="us">American stuff</div>
<div ng-if="abc.country.selectedCountry.code == 'JP'" id="jp">Japanese stuff</div>
<div ng-if="abc.country.selectedCountry.code == 'BR'" id="br">Brazilian Stuff</div>
<div ng-if="abc.country.selectedCountry.code == 'FR'" id="fr">French stuff</div>
<div ng-if="abc.country.selectedCountry.code == 'UK'" id="uk">UK stuff</div>
<div ng-if="abc.country.selectedCountry.code == 'CA'" id="ca">Canada stuff</div>
</div>
</div>
</body>
</html>
您可以通过在下拉列表中使用 ng-change 来完成。每当下拉列表的值发生更改时，它都会调用 updateUser 函数并更新用户对象。
$scope.updateUser = function(selectedCountry) {
_this.user.selCountry = selectedCountry;
}
关于javascript - AngularJS 更新表单并选择菜单选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42862867/