AngularJS 如果值 = true 则更新 ng-model

Question

您好，我正在构建一个概览数据库数据的应用程序。我有一个表单，它使用 ng-model 将该信息加载到输入字段中，用户可以选择更改这些值。

但是，当用户更改输入字段中的值时，我不希望概览上的值实时更新。只有在提交表单后我才想看到更改。

我在概览方面有这个HTML

<dt>COMPANY</dt>
<dd>{{client.company}}</dd>
<dt>NAME</dt>
<dd>{{client.firstname}} {{client.lastname}}</dd>

表格是

<p>Company</p><input type="text" name="ciCompany" class="pinfo" ng-model-options="{ updateOn: 'value = true' }" required ng-model="client[0].company">
<p>First Name</p><input type="text" name="ciFirstName" class="pinfo" ng-model-options="{ updateOn: 'value = true' }" required ng-model="client[0].firstname">
<p>Last Name</p><input type="text" name="ciLastName" class="pinfo" ng-model-options="{ updateOn: 'value = true' }" required ng-model="client[0].lastname">

我不知道使用 ng-model-options 是否是正确的方法。但从逻辑上讲，这就是我希望它工作的方式。但事实并非如此。

谢谢

Answer 1

您可以使用 angular.copy 来执行此操作：

$scope.clients = {}; // your array
$scope.clientsCopy = angular.copy($scope.clients);

<dt>COMPANY</dt>
<dd>{{clientsCopy.company}}</dd>
<dt>NAME</dt>
<dd>{{clientsCopy.firstname}} {{clientsCopy.lastname}}</dd>

<form ng-submit="userSubmit()">
  <p>Company</p><input type="text" required ng-model="clients[0].company">
</form>

然后您可以使用 onSubmit 更新新值：

$scope.userSubmit = function() {
  $scope.clientsCopy = $scope.clients; 
}

如果您使用下划线或 lodash，您也可以使用 _.extends 或 _.merge。

Answer 2

在表单提交时您必须使用 angular.copy 方法来复制您的数据，如下所示：

$scope.client = angular.copy(clients[0]);

请参考：reference link

AngularJS 如果值 = true 则更新 ng-model

AngularJS update ng-model if value = true

javascript

angularjs

angular-ngmodel