Question

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

var block = '<div>'+'<p><b>'+storeLocations[i].accountName+'</b></p>'+
                             '<p>Min Temp: '+storeLocations[i].minTemp+'</p>'+
                             '<p>Max Temp: '+storeLocations[i].maxTemp+'</p>'+
                             '<img src="storeLocations[i].weatherIconURL"/>'+
                        '</div>';

我制作了一个表单，用于更新在我的页面上预填充了这些用户信息的信息，如下所示：

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

我的问题如下：在页面的标题栏中显示用户名（{{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><span ng-show="pageCtrl.formSubmitted">{{ pageCtrl.user.name }}</span></header>

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

Answer 3

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

＆＃13;

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();
});

＆＃13;

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

＆＃13;

ng-model不更新我的对象值

3 个答案: