Javascript 使用angular js重置表格首选项

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

当页面加载时，将调用$ctrl.getNotificationSettings（），它将列出各种类别的用户通知首选项。请参阅屏幕截图

我还编写了一个$ctrl.save（），它允许用户更新他们的首选项并将其保存，效果很好

现在我有了一个带有$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>

用于列出数据的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
    }]

---

如何使用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;
        };

---

我认为有两种方法可以解决你的问题：

检索数据后，将其存储在临时占位符中，如果用户执行$ctrl.cancelSettings，则将表单数据设置为占位符的数据。例如：

    $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;
    }; 

或者，另一种解决方案是重复cancel操作中的第一个函数调用：

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

---

您想在哪里使用表单？

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