ng-model 没有更新我的 object 值

Question

我有一个 one-page 应用程序使用 angularJS。我在我的控制器中有一个用户 object 定义如下：

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>

我的问题如下：在页面的 header 栏中显示了用户名 ({{pageCtrl.user.name}})。当用户通过更改他的名字对表单进行操作时，这是在保存表单之前更新的。我想等待表单提交以查看用户名更新。但我仍然想让我的表格预先填写用户信息。

你知道怎么做吗？

提前致谢

Answer 1

使用您的 ng-model 绑定到临时对象，例如：

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'
}

并且当您提交表单时，更新用户对象。

Answer 2

假设这是您的 header,

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

在 pageCtrl.userForm(user) 函数中，一旦您的表单成功提交，只需将 pageCtrl.formSubmitted 设置为真。很酷的东西，您是否也可以将此布尔值用于其他目的。

Answer 3

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

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-model 没有更新我的 object 值

ng-model not updating my object values

javascript

angularjs

angular-ngmodel