使用角度js重置表格偏好

Question

我的应用程序中有以下表格，用户可以在其中设置通知首选项。

当页面加载$ ctrl.getNotificationSettings（
1. ）将被调用，它会列出各种categories.please用户通知首指截图
2. 我也写一个$ ctrl.save（），它允许用户更新他们的偏好，并保存它的工作正常。
3. 现在我有一个$ ctrl.cancelSettings（）的重置按钮，在这里我希望用户能够改变一些偏好，如果他决定在保存之前恢复它，表应该与偏好设置它是如何加载时。这部分需要一些帮助。

由于其他一些挑战，我不能在这里使用表格。

HTML

<tbody> 
    <tr data-ng-repeat="app in $ctrl.notificationSettings" class="content-box"> 
     <td data-ng-bind="app.appName"></td> 
     <td><ng-checkbox data-checked="app.email" rounded="true"></ng-checkbox></td> 
     <td><ng-checkbox data-checked="app.sms" rounded="true"></ng-checkbox></td> 
    </tr> 
    </tbody> 
    </table> 
    <div class="content-box"> 
     <button class="ng-button-primary" data-ng-click="$ctrl.saveSettings()">Save</button> 
     <button class="ng-button-secondary" data-ng-click="$ctrl.cancelSettings()">Reset</button> 
    </div> 

JS

  $ctrl.getNotificationSettings = function() { 
       var url = "http://localhost:3000/json/notification-settings.json"; 
       rsicontext.getData(url).then(function (response) { 
        $ctrl.notificationSettings = response.data; 
        $ctrl.appName = response.data.appName; 
        $ctrl.emailNotification = response.data.email; 
        $ctrl.smsNotification = response.data.sms; 
       }); 
      }; 


      $ctrl.cancelSettings = function() { 
       console.log("cancel settings"); 
      }; 

JSON格式列出数据

[{ 
    "appName":"Finance", 
    "email":true, 
    "sms":false 
    }, 
    { 
    "appName":"Sports", 
    "email":true, 
    "sms":true 
    }, 
    { 
    "appName":"Economics", 
    "email":false, 
    "sms":false 
    }, 
    { 
    "appName":"Health", 
    "email":false, 
    "sms":true 
    }] 

Answer 1

使用angular.copy创建原始对象的深层副本如何？

$ctrl.getNotificationSettings = function() { 
      var url = "http://localhost:3000/json/notification-settings.json"; 
      rsicontext.getData(url).then(function (response) { 
       $ctrl.notificationSettings = response.data; 
       $ctrl.appName = response.data.appName; 
       $ctrl.emailNotification = response.data.email; 
       $ctrl.smsNotification = response.data.sms; 
       $scope.origData = angular.copy(response.data); 
      }); 
     }; 

     $ctrl.cancelSettings = function() { 
      $ctrl.notificationSettings = $scope.origData; 
       $ctrl.appName = $scope.origData.appName; 
       $ctrl.emailNotification = $scope.origData.email; 
       $ctrl.smsNotification = $scope.origData.sms; 
     }; 

Answer 2

我认为有2种方式来解决问题：

临时占位符检索数据存储它之后，如果用户执行$ ctrl.cancelSettings表单数据设置为placeholder.eg的：

$ctrl.getNotificationSettings = function() { 
     var url = "http://localhost:3000/json/notification-settings.json"; 
     rsicontext.getData(url).then(function (response) { 
      $ctrl.placeholder = {}; 

      $ctrl.notificationSettings = response.data; 
      $ctrl.placeholder.notificationSettings = response.data; 

      $ctrl.appName = response.data.appName; 
      $ctrl.placeholder.appName = response.data.appName; 

      $ctrl.emailNotification = response.data.email; 
      $ctrl.placeholder.emailNotification = response.data.email; 

      $ctrl.smsNotification = response.data.sms; 
      $ctrl.placeholder.smsNotification = response.data.sms; 
     }); 
    }; 
    $ctrl.cancelSettings = function() { 
     $ctrl.notificationSettings = $ctrl.placeholder.notificationSettings; 
     $ctrl.appName = $ctrl.placeholder.appName; 
     $ctrl.emailNotification = $ctrl.placeholder.emailNotification; 
     $ctrl.smsNotification = $ctrl.placeholder.smsNotification; 
    }; 

或者另一个解决方案是重复刚才的第一个函数调用中取消操作：

$ctrl.cancelSettings = function() { 
     var url = "http://localhost:3000/json/notification-settings.json"; 
     rsicontext.getData(url).then(function (response) { 
      $ctrl.notificationSettings = response.data; 
      $ctrl.appName = response.data.appName; 
      $ctrl.emailNotification = response.data.email; 
      $ctrl.smsNotification = response.data.sms; 
     }); 
    };