使用角度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; 
     }); 
    };