ng模型没有更新我的对象值

ng-model not updating my object values

本文关键字：我的 对象 更新 模型 ng      更新时间：2023-09-26

我有一个使用angularJS的单页应用程序。我在我的控制器中有一个定义如下的用户对象：

this.user = {
    'name':'Robert',
    'age':'30'
}

我制作了一个表格来更新那些在我的页面上预先填充了用户信息的信息，比如：

<form name="userForm" ng-submit="userForm.$valid && pageCtrl.userForm(user)" novalidate>
    <label for="name">Name *</label>
    <input type="text" name="name" ng-model='pageCtrl.user.name' class="form-control" required/>
    <label for="age">Age *</label>
    <input type="text" name="age" ng-model='pageCtrl.user.age' class="form-control" required/>
    <span ng-if='!userForm.$valid' class="error">Invalid form</span>
    <input type="submit" value="Save my informations" class="btn btn-success"/>
</form>

我的问题如下：在页面的标题栏中显示用户名（｛｛pageCtrl.user.name｝｝）。当用户通过更改姓名对表单进行操作时，这是在保存表单之前进行的更新。我想等待表单提交以查看用户名更新。但我仍然想在我的表单中预先填写用户的信息。

你知道怎么做吗？

提前感谢

您可以使用复制的对象仅在用户保存表单时应用更改：

var app = angular.module('app', []);
app.controller('pageCtrl', function() {
  var vm = this;  
  vm.user = {
    'name':'Robert',
    'age':'30'
  };
  
  vm.tmpUser = {};
  vm.update = function() {
    vm.user = angular.copy(vm.tmpUser);
  };
  vm.reset = function() {
    vm.tmpUser = angular.copy(vm.user);
  };
  
  vm.reset();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="pageCtrl as pageCtrl">
  <form name="userForm" ng-submit="userForm.$valid" novalidate>
    <label for="name">Name *</label>
    <input type="text" name="name" ng-model='pageCtrl.tmpUser.name' class="form-control" required/>
    <label for="age">Age *</label>
    <input type="text" name="age" ng-model='pageCtrl.tmpUser.age' class="form-control" required/>
    <span ng-if='!userForm.$valid' class="error">Invalid form</span>
    <input type="submit" ng-click="pageCtrl.update()" ng-disabled="!userForm.$valid" value="Save my informations" class="btn btn-success" />
  </form>  
  <pre>user = {{pageCtrl.user | json}}</pre>
  <pre>tmpUser = {{pageCtrl.tmpUser | json}}</pre>
</body>

使用ng模型绑定到临时对象，如：

this.tmpUser = {
      'name':'Robert',
      'age':'30'
   }

您的表单为：

<form name="userForm" ng-submit="userForm.$valid && pageCtrl.userForm(user)" novalidate>
    <label for="name">Name *</label>
    <input type="text" name="name" ng-model='pageCtrl.tmpUser.name' class="form-control" required/>
    <label for="age">Age *</label>
    <input type="text" name="age" ng-model='pageCtrl.tmpUser.age' class="form-control" required/>
    <span ng-if='!userForm.$valid' class="error">Invalid form</span>
    <input type="submit" value="Save my informations" class="btn btn-success"/>
</form>

保留您的用户对象：

this.user = {
    'name':'Robert',
    'age':'30'
}

提交表单时，更新用户对象

假设这是您的头，

<header><span ng-show="pageCtrl.formSubmitted">{{ pageCtrl.user.name }}</span></header>

在pageCtrl.userForm（user）函数中，只要在表单成功提交后将pageCtrl.formSubmitted设置为true即可。酷的是，你也可以将这个布尔值用于其他目的。

相关文章：