如何制作一个取消按钮，该按钮将撤消您在Angularjs中的TextFields上输入的内容

Question

抱歉，我真的是新手。我希望有人会帮助我了解如何在将数据放入数据后撤消。

我有client.js ----

this.client = {
        id: '',
        firstname: '',
        lastname: '',
        age: '',
        new: true
    };
    function cancel() {
        clientService.cancel(vm.client);
        getClients();
        //clear();
    }

和clientservice.js

function cancel(client) {
        //newValue[] = clients;
        //cancel_lagi = function (newvalue, oldvalue) {
        //clients.new = 'New Value :' + clients.newValue;
        //clients.old = 'Old Value :' + $scopes.oldValue;
        //clients.oldvalue = oldvalue;
        //client.newValue = oldvalue;
        //--------This doesn't do anything 
        //}
    }

和我的client.html

 <button type="submit" class="btn btn-warning btn-sm" data-ng-click="cancel()">

用户将尝试从本地存储中编辑数据后，当他/她单击"取消"按钮时，它将返回其上一个值。

Answer 1

尝试这是您的控制器。您将在更改数据之前复制数据并使用它来恢复取消。

angular.module('mymodule').controller('MyController', MyController);
/** @ngInject */
function MyController(MyService) {
   var vm = this;
   // However you get the data from your service, not important
   vm.data = MyService.getData();
   // This is where you will save a copy of your data
   var savedData = null;
   vm.edit = function(data) {
      // This is important: this creates a copy of the 
      // data so you my revert back to it on the cancel method
      savedData = angular.copy(data);
      // See HTML below: vm.data.property should be bound to the 
      // ng-model attribute of a given form control.
   };
   vm.save = function(data) {
      // However you save your data, not important.
      MyService.save(data);
      // Set savedData to null as we don't need it anymore.
      savedData = null;
   };
   vm.cancel = function(data) {
      // Important: set the data back to original.
      data = angular.copy(savedData);
      // Set savedData to null again
      savedData = null;
   };
}

html：

<div ng-controller="MyController as vm">
   <button ng-click="vm.edit(vm.data)">Edit</button>
   <form>
      <!-- 
        the vm.data.firstName is bound here and changes to it 
        will be reflected in the controller's vm.data. In fact,
        they are the same. 
      -->
      <input type="text" ng-model="vm.data.firstName" />
     <!-- save will save the data to your service -->
     <button ng-click="vm.save(vm.data)">Save</button>
     <-- cancel will revert vm.data back to it's original values -->
     <button ng-click="vm.cancel(vm.data)">Cancel</button>
   </form>
</div>

这不是一个完整的示例，并且可能包含错误，但是，在您以表单中使用数据之前，请放弃，然后，如果取消，则使用您制作的副本重置表单数据。