Question

我有一个用于输入用户信息的表单myForm。这些字段都与控制器中的模型相关联：

<input type="text" name="name" class="form-control" 
       ng-model="abc.user.name" 
       ng-model-options="{ updateOn: 'blur'}" 
       required>

如果我在您键入时使用跟踪用户的值，这可以正常工作

 {{abc.user | json}}

我看到这个名字是打字的。

 {
   "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>

但是我该怎么做 AND 分配在＆＃34; country＆＃34;中选择的值到user对象？到目前为止，我尝试做的所有事情都打破了ng-if。

你可以在这里看到整个事情：https://plnkr.co/edit/uvZBb8OS55Bcop9SCDLM?p=preview

Answer 1

<!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;
  }

https://plnkr.co/edit/gVt4PvI1cKmXM0jxLlqR?p=preview

AngularJS更新表单有选择菜单选项吗？

1 个答案: